This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,79 @@
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
import Link from "next/link";
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { notFound } from "next/navigation";
|
||||
import ApplicationClient from "./ApplicationClient";
|
||||
|
||||
// 🔥 IMPORTAMOS LA TUBERÍA MÁGICA
|
||||
import { getLocalizedData } from "@/lib/i18nHelper";
|
||||
|
||||
// --- FUNCIÓN ORIGINAL PARA LEER IMÁGENES LOCALES ---
|
||||
function getApplicationImages(slug: string) {
|
||||
const imagesDir = path.join(process.cwd(), "public", "applications", slug);
|
||||
let blueprints: string[] = [];
|
||||
let machines: string[] = [];
|
||||
let heroImage = "";
|
||||
|
||||
if (fs.existsSync(imagesDir)) {
|
||||
const files = fs.readdirSync(imagesDir).filter(file => /\.(png|jpe?g|webp)$/i.test(file));
|
||||
|
||||
heroImage = files[0] ? `/applications/${slug}/${files[0]}` : "";
|
||||
blueprints = files.filter(f => f.includes("Screenshot") || f.startsWith("P10") || f.includes("blueprint")).slice(0, 3).map(f => `/applications/${slug}/${f}`);
|
||||
machines = files.filter(f => !f.includes("Screenshot") && !f.startsWith("P10") && !f.includes("blueprint")).slice(1, 4).map(f => `/applications/${slug}/${f}`);
|
||||
}
|
||||
|
||||
return { heroImage, blueprints, machines };
|
||||
}
|
||||
|
||||
// GENERACIÓN DE RUTAS ESTÁTICAS DESDE LA BD
|
||||
export async function generateStaticParams() {
|
||||
const apps = await prisma.application.findMany({ select: { slug: true } });
|
||||
return apps.map((app: { slug: string }) => ({ slug: app.slug }));
|
||||
}
|
||||
|
||||
export const revalidate = 60;
|
||||
|
||||
// 🔥 AHORA RECIBIMOS EL LOCALE DESDE LA URL
|
||||
export default async function ApplicationPage({ params }: { params: Promise<{ slug: string, locale: string }> }) {
|
||||
const resolvedParams = await params;
|
||||
const { slug, locale } = resolvedParams;
|
||||
|
||||
// 1. Buscamos la Teoría General de la Aplicación
|
||||
const rawData = await prisma.application.findUnique({
|
||||
where: { slug }
|
||||
});
|
||||
|
||||
if (!rawData) {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col items-center justify-center bg-[#F5F5F7] dark:bg-[#050505]">
|
||||
<h1 className="text-2xl text-[#86868B] mb-4">Application not found in Database</h1>
|
||||
<Link href={`/${locale}/#applications-deep`} className="text-[#00F0FF] hover:underline">Return Home</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 🔥 TRADUCIMOS LA APLICACIÓN PRINCIPAL
|
||||
const data = getLocalizedData(rawData, locale);
|
||||
|
||||
// 2. Buscamos el "Muro de Soluciones" (Casos Reales específicos de esta app)
|
||||
const rawRealCases = await prisma.globalNode.findMany({
|
||||
where: {
|
||||
application: slug,
|
||||
isActive: true,
|
||||
projectOverview: { not: null }
|
||||
},
|
||||
orderBy: { createdAt: 'desc' }
|
||||
});
|
||||
|
||||
// 🔥 TRADUCIMOS TODOS LOS CASOS DE ESTUDIO DEL MURO
|
||||
const realCases = rawRealCases.map((node: any) => getLocalizedData(node, locale));
|
||||
|
||||
// 3. Leemos las imágenes de la carpeta original
|
||||
const images = getApplicationImages(slug);
|
||||
|
||||
// Pasamos TODO al componente cliente interactivo (que ya viene traducido)
|
||||
return <ApplicationClient data={data} realCases={realCases} images={images} />;
|
||||
}
|
||||
@@ -0,0 +1,266 @@
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import BreathingField from "@/components/visuals/BreathingField";
|
||||
|
||||
// 🔥 IMPORTACIONES DE IDIOMAS
|
||||
import { getLocalizedData } from "@/lib/i18nHelper";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
|
||||
// ── SÚPER PARSER MARKDOWN (Con Tablas, Imágenes y Dark Mode puro) ──
|
||||
const renderMarkdown = (text: string) => {
|
||||
if (!text) return null;
|
||||
const lines = text.split('\n');
|
||||
const elements: React.ReactNode[] = [];
|
||||
|
||||
let listItems: React.ReactNode[] = [];
|
||||
let isOrderedList = false;
|
||||
|
||||
let inTable = false;
|
||||
let tableHeaders: string[] = [];
|
||||
let tableRows: string[][] = [];
|
||||
|
||||
const pushTable = () => {
|
||||
if (inTable) {
|
||||
elements.push(
|
||||
<div key={`table-${elements.length}`} className="my-12 w-full overflow-x-auto pb-4 [scrollbar-width:none]">
|
||||
<table className="w-full text-left border-collapse min-w-[600px] shadow-2xl rounded-2xl overflow-hidden border border-white/5">
|
||||
<thead>
|
||||
<tr className="bg-[#111]">
|
||||
{tableHeaders.map((th, i) => (
|
||||
<th key={i} className={`p-5 border-b border-white/10 text-xs uppercase tracking-widest font-semibold ${i === tableHeaders.length - 1 ? 'text-[#00F0FF] bg-[#00F0FF]/5' : 'text-white'}`}>
|
||||
{parseInline(th)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-black/40 backdrop-blur-md">
|
||||
{tableRows.map((row, rIdx) => (
|
||||
<tr key={rIdx} className="hover:bg-white/[0.02] transition-colors group">
|
||||
{row.map((cell, cIdx) => (
|
||||
<td key={cIdx} className={`p-5 border-b border-white/5 text-sm ${cIdx === 0 ? 'text-[#A1A1A6] font-medium' : cIdx === row.length - 1 ? 'text-white font-semibold bg-[#00F0FF]/5 group-hover:bg-[#00F0FF]/10 transition-colors' : 'text-white/80'}`}>
|
||||
{parseInline(cell)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
inTable = false;
|
||||
tableHeaders = [];
|
||||
tableRows = [];
|
||||
}
|
||||
};
|
||||
|
||||
const pushList = () => {
|
||||
if (listItems.length > 0) {
|
||||
elements.push(
|
||||
isOrderedList ? (
|
||||
<ol key={`ol-${elements.length}`} className="list-decimal ml-6 mb-8 text-[#A1A1A6] space-y-2 text-lg font-light marker:text-[#00F0FF]">
|
||||
{listItems}
|
||||
</ol>
|
||||
) : (
|
||||
<ul key={`ul-${elements.length}`} className="list-disc ml-6 mb-8 text-[#A1A1A6] space-y-2 text-lg font-light marker:text-[#00F0FF]">
|
||||
{listItems}
|
||||
</ul>
|
||||
)
|
||||
);
|
||||
listItems = [];
|
||||
}
|
||||
};
|
||||
|
||||
const parseInline = (str: string) => {
|
||||
const boldRegex = /\*\*(.*?)\*\*/g;
|
||||
const italicRegex = /\*(.*?)\*/g;
|
||||
|
||||
let parts = str.split(boldRegex);
|
||||
return parts.map((part, i) => {
|
||||
if (i % 2 === 1) return <strong key={i} className="font-semibold text-white">{part}</strong>;
|
||||
|
||||
let subParts = part.split(italicRegex);
|
||||
return subParts.map((subPart, j) => {
|
||||
if (j % 2 === 1) return <em key={`${i}-${j}`} className="italic text-white/90">{subPart}</em>;
|
||||
return subPart;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
lines.forEach((line, idx) => {
|
||||
const trimmed = line.trim();
|
||||
|
||||
if (!trimmed) {
|
||||
pushList(); pushTable();
|
||||
return;
|
||||
}
|
||||
|
||||
if (trimmed.startsWith('|') && trimmed.endsWith('|')) {
|
||||
pushList();
|
||||
const cells = trimmed.split('|').filter((_, i, arr) => i !== 0 && i !== arr.length - 1).map(c => c.trim());
|
||||
|
||||
if (!inTable) {
|
||||
inTable = true;
|
||||
tableHeaders = cells;
|
||||
} else if (cells.every(c => c.match(/^[-:]+$/))) {
|
||||
} else {
|
||||
tableRows.push(cells);
|
||||
}
|
||||
return;
|
||||
} else {
|
||||
pushTable();
|
||||
}
|
||||
|
||||
const imgMatch = trimmed.match(/^!\[(.*?)\]\((.*?)\)$/);
|
||||
if (imgMatch) {
|
||||
pushList(); pushTable();
|
||||
elements.push(
|
||||
<div key={`img-${idx}`} className="relative w-full my-12 rounded-[2rem] overflow-hidden border border-white/10 shadow-2xl bg-[#111]">
|
||||
<img src={imgMatch[2]} alt={imgMatch[1]} className="w-full h-auto object-cover hover:scale-105 transition-transform duration-1000 grayscale hover:grayscale-0" loading="lazy" />
|
||||
</div>
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const h3Match = trimmed.match(/^###\s*(.*)/);
|
||||
if (h3Match) { pushList(); pushTable(); elements.push(<h3 key={idx} className="text-2xl mt-8 mb-4 font-medium text-[#00F0FF]">{parseInline(h3Match[1])}</h3>); return; }
|
||||
|
||||
const h2Match = trimmed.match(/^##\s*(.*)/);
|
||||
if (h2Match) { pushList(); pushTable(); elements.push(<h2 key={idx} className="text-3xl mt-10 mb-5 font-light text-white tracking-tight">{parseInline(h2Match[1])}</h2>); return; }
|
||||
|
||||
const h1Match = trimmed.match(/^#\s*(.*)/);
|
||||
if (h1Match) { pushList(); pushTable(); elements.push(<h1 key={idx} className="text-4xl md:text-5xl mt-12 mb-6 font-light text-white tracking-tight">{parseInline(h1Match[1])}</h1>); return; }
|
||||
|
||||
const quoteMatch = trimmed.match(/^>\s*(.*)/);
|
||||
if (quoteMatch) {
|
||||
pushList(); pushTable();
|
||||
elements.push(
|
||||
<blockquote key={idx} className="border-l-4 border-[#00F0FF] pl-5 py-2 my-8 text-xl font-light italic text-[#A1A1A6] bg-[#00F0FF]/5 rounded-r-xl">
|
||||
{parseInline(quoteMatch[1])}
|
||||
</blockquote>
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const ulMatch = trimmed.match(/^[-*]\s*(.*)/);
|
||||
if (ulMatch) {
|
||||
isOrderedList = false;
|
||||
listItems.push(<li key={idx} className="leading-relaxed pl-2">{parseInline(ulMatch[1])}</li>);
|
||||
return;
|
||||
}
|
||||
|
||||
const olMatch = trimmed.match(/^\d+\.\s*(.*)/);
|
||||
if (olMatch) {
|
||||
isOrderedList = true;
|
||||
listItems.push(<li key={idx} className="leading-relaxed pl-2">{parseInline(olMatch[1])}</li>);
|
||||
return;
|
||||
}
|
||||
|
||||
pushList();
|
||||
elements.push(
|
||||
<p key={idx} className="text-[#A1A1A6] font-light leading-relaxed mb-6 text-lg">
|
||||
{parseInline(trimmed)}
|
||||
</p>
|
||||
);
|
||||
});
|
||||
|
||||
pushList();
|
||||
pushTable();
|
||||
|
||||
return <>{elements}</>;
|
||||
};
|
||||
|
||||
// ── COMPONENTE PRINCIPAL (AHORA RECIBE EL LOCALE) ──
|
||||
export default async function HeritagePage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const resolvedParams = await params;
|
||||
const locale = resolvedParams.locale;
|
||||
|
||||
// 🔥 Cargamos el diccionario para los textos fijos
|
||||
const t = await getTranslations("HeritagePage");
|
||||
|
||||
let rawSections: any[] = [];
|
||||
try {
|
||||
rawSections = await prisma.heritageSection.findMany({
|
||||
orderBy: { order: 'asc' }
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
// 🔥 Pasamos las secciones de Prisma por el traductor dinámico
|
||||
const sections = rawSections.map(sec => getLocalizedData(sec, locale));
|
||||
|
||||
return (
|
||||
<main className="relative min-h-screen pb-24 bg-[#0A0A0C]">
|
||||
<BreathingField />
|
||||
|
||||
{/* NAVEGACIÓN FLOTANTE */}
|
||||
<div className="fixed top-24 left-6 z-50">
|
||||
<Link href={`/${locale}/#our-story`} className="inline-flex items-center gap-2 text-sm font-medium text-[#86868B] hover:text-white transition-colors py-2 px-4 bg-white/5 backdrop-blur-md rounded-full border border-white/10">
|
||||
<ArrowLeft size={16} /> {t("backToOverview")}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* HERO GIGANTE */}
|
||||
<section className="relative w-full h-[70vh] flex items-center justify-center overflow-hidden">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(0,102,204,0.15)_0%,transparent_70%)]" />
|
||||
<div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
|
||||
<span className="text-[#00F0FF] uppercase tracking-widest text-sm font-semibold mb-4 block">
|
||||
{t("subtitle")}
|
||||
</span>
|
||||
<h1 className="text-5xl md:text-7xl font-light text-white tracking-tight leading-tight">
|
||||
{t("title1")} <br/> <span className="text-[#86868B]">{t("title2")}</span>
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* LOS BLOQUES DINÁMICOS DEL CMS */}
|
||||
<div className="relative z-10 max-w-3xl mx-auto px-6 space-y-16 md:space-y-24">
|
||||
{sections.length === 0 ? (
|
||||
<p className="text-center text-[#86868B]">{t("emptyState")}</p>
|
||||
) : (
|
||||
sections.map((sec) => (
|
||||
<div key={sec.id} className="animate-in fade-in slide-in-from-bottom-8 duration-1000">
|
||||
|
||||
{/* El título ya viene traducido */}
|
||||
{sec.title && <h2 className="text-3xl font-medium text-white mb-6">{sec.title}</h2>}
|
||||
|
||||
{/* 🔥 BLOQUE DE TEXTO CON SÚPER MARKDOWN 🔥 */}
|
||||
{sec.type === 'text' && (
|
||||
<div className="max-w-none">
|
||||
{renderMarkdown(sec.content || "")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 🔥 BLOQUE DE IMAGEN GIGANTE 🔥 */}
|
||||
{sec.type === 'image' && sec.mediaUrl && (
|
||||
<div className="relative w-full h-80 md:h-[500px] rounded-3xl overflow-hidden border border-white/10 shadow-2xl">
|
||||
<Image src={`/heritage/${sec.mediaUrl}`} alt={sec.title || "Heritage Image"} fill className="object-cover grayscale hover:grayscale-0 transition-all duration-1000" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 🔥 BLOQUE DE VIDEO NATIVO (MP4 LOCAL) 🔥 */}
|
||||
{sec.type === 'video' && sec.mediaUrl && (
|
||||
<div className="relative w-full aspect-video rounded-3xl overflow-hidden border border-white/10 shadow-2xl bg-black">
|
||||
<video
|
||||
src={`/heritage/videos/${sec.mediaUrl}`}
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
controls
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "../globals.css";
|
||||
|
||||
import NavBar from "@/components/layout/NavBar";
|
||||
import NavigationManager from "@/components/layout/NavigationManager";
|
||||
import SilentObserver from "@/components/ai/SilentObserver";
|
||||
import Footer from "@/components/layout/Footer";
|
||||
// 🔥 NUEVO: Importamos el Drawer del Carrito / Helpdesk
|
||||
import CartDrawer from "@/components/layout/CartDrawer";
|
||||
|
||||
import { NextIntlClientProvider } from 'next-intl';
|
||||
import { getMessages } from 'next-intl/server';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { routing } from '@/i18n/routing';
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "FLUX | Energy, Directed.",
|
||||
description: "Advanced Radio Frequency Solutions by Patrizio Grando.",
|
||||
};
|
||||
|
||||
export const viewport: Viewport = {
|
||||
width: "device-width",
|
||||
initialScale: 1,
|
||||
maximumScale: 1,
|
||||
userScalable: false,
|
||||
viewportFit: "cover",
|
||||
};
|
||||
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
params
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
params: Promise<{ locale: string }>;
|
||||
}>) {
|
||||
const resolvedParams = await params;
|
||||
const locale = resolvedParams.locale;
|
||||
|
||||
if (!routing.locales.includes(locale as any)) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const messages = await getMessages();
|
||||
|
||||
return (
|
||||
<html lang={locale} className="scroll-smooth bg-[#F5F5F7]">
|
||||
<body
|
||||
className={`${inter.className} text-[#1D1D1F] antialiased flex flex-col min-h-screen overflow-x-hidden w-full relative`}
|
||||
style={{
|
||||
overscrollBehaviorX: "none",
|
||||
touchAction: "pan-y",
|
||||
maxWidth: "100vw",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<NextIntlClientProvider messages={messages}>
|
||||
|
||||
<NavBar />
|
||||
|
||||
{/* 🔥 Panel del Carrito de Repuestos y Soporte Técnico 🔥 */}
|
||||
<CartDrawer />
|
||||
|
||||
{/* Inyectamos el manejador de transiciones aquí */}
|
||||
<NavigationManager />
|
||||
|
||||
<div className="flex-grow w-full flex flex-col relative">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
<SilentObserver />
|
||||
|
||||
</NextIntlClientProvider>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,274 @@
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { ArrowLeft, Calendar, Tag, Linkedin } from "lucide-react";
|
||||
import BreathingField from "@/components/visuals/BreathingField";
|
||||
|
||||
// 🔥 IMPORTACIÓN DEL MOTOR DE TRADUCCIÓN 🔥
|
||||
import { getLocalizedData } from "@/lib/i18nHelper";
|
||||
|
||||
export async function generateStaticParams() {
|
||||
const articles = await prisma.newsArticle.findMany({ select: { slug: true } });
|
||||
return articles.map((a: any) => ({ slug: a.slug }));
|
||||
}
|
||||
|
||||
// ── SÚPER PARSER MARKDOWN (Con Tablas, Imágenes y Dark/Light Mode) ──
|
||||
// ... (El código del Súper Parser se queda IGUAL, no te preocupes) ...
|
||||
const renderMarkdown = (text: string) => {
|
||||
if (!text) return null;
|
||||
const lines = text.split('\n');
|
||||
const elements: React.ReactNode[] = [];
|
||||
|
||||
let listItems: React.ReactNode[] = [];
|
||||
let isOrderedList = false;
|
||||
|
||||
let inTable = false;
|
||||
let tableHeaders: string[] = [];
|
||||
let tableRows: string[][] = [];
|
||||
|
||||
const pushTable = () => {
|
||||
if (inTable) {
|
||||
elements.push(
|
||||
<div key={`table-${elements.length}`} className="my-12 w-full overflow-x-auto pb-4 [scrollbar-width:none]">
|
||||
<table className="w-full text-left border-collapse min-w-[600px] shadow-2xl rounded-2xl overflow-hidden border border-black/5 dark:border-white/5">
|
||||
<thead>
|
||||
<tr className="bg-[#1D1D1F] dark:bg-[#111]">
|
||||
{tableHeaders.map((th, i) => (
|
||||
<th key={i} className={`p-5 border-b border-black/10 dark:border-white/10 text-xs uppercase tracking-widest font-semibold ${i === tableHeaders.length - 1 ? 'text-[#0066CC] dark:text-[#00F0FF] bg-[#0066CC]/5 dark:bg-[#00F0FF]/5' : 'text-white'}`}>
|
||||
{parseInline(th)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white/50 dark:bg-black/40 backdrop-blur-md">
|
||||
{tableRows.map((row, rIdx) => (
|
||||
<tr key={rIdx} className="hover:bg-black/5 dark:hover:bg-white/[0.02] transition-colors group">
|
||||
{row.map((cell, cIdx) => (
|
||||
<td key={cIdx} className={`p-5 border-b border-black/5 dark:border-white/5 text-sm ${cIdx === 0 ? 'text-[#86868B] font-medium' : cIdx === row.length - 1 ? 'text-[#1D1D1F] dark:text-white font-semibold bg-[#0066CC]/5 dark:bg-[#00F0FF]/5 group-hover:bg-[#0066CC]/10 dark:group-hover:bg-[#00F0FF]/10 transition-colors' : 'text-[#1D1D1F]/80 dark:text-white/80'}`}>
|
||||
{parseInline(cell)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
inTable = false;
|
||||
tableHeaders = [];
|
||||
tableRows = [];
|
||||
}
|
||||
};
|
||||
|
||||
const pushList = () => {
|
||||
if (listItems.length > 0) {
|
||||
elements.push(
|
||||
isOrderedList ? (
|
||||
<ol key={`ol-${elements.length}`} className="list-decimal ml-6 mb-8 text-[#86868B] dark:text-[#A1A1A6] space-y-2 text-lg font-light marker:text-[#0066CC] dark:marker:text-[#00F0FF]">
|
||||
{listItems}
|
||||
</ol>
|
||||
) : (
|
||||
<ul key={`ul-${elements.length}`} className="list-disc ml-6 mb-8 text-[#86868B] dark:text-[#A1A1A6] space-y-2 text-lg font-light marker:text-[#0066CC] dark:marker:text-[#00F0FF]">
|
||||
{listItems}
|
||||
</ul>
|
||||
)
|
||||
);
|
||||
listItems = [];
|
||||
}
|
||||
};
|
||||
|
||||
const parseInline = (str: string) => {
|
||||
const boldRegex = /\*\*(.*?)\*\*/g;
|
||||
const italicRegex = /\*(.*?)\*/g;
|
||||
|
||||
let parts = str.split(boldRegex);
|
||||
return parts.map((part, i) => {
|
||||
if (i % 2 === 1) return <strong key={i} className="font-semibold text-[#1D1D1F] dark:text-white">{part}</strong>;
|
||||
|
||||
let subParts = part.split(italicRegex);
|
||||
return subParts.map((subPart, j) => {
|
||||
if (j % 2 === 1) return <em key={`${i}-${j}`} className="italic text-[#1D1D1F]/90 dark:text-white/90">{subPart}</em>;
|
||||
return subPart;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
lines.forEach((line, idx) => {
|
||||
const trimmed = line.trim();
|
||||
|
||||
if (!trimmed) {
|
||||
pushList(); pushTable();
|
||||
return;
|
||||
}
|
||||
|
||||
if (trimmed.startsWith('|') && trimmed.endsWith('|')) {
|
||||
pushList();
|
||||
const cells = trimmed.split('|').filter((_, i, arr) => i !== 0 && i !== arr.length - 1).map(c => c.trim());
|
||||
if (!inTable) { inTable = true; tableHeaders = cells; }
|
||||
else if (cells.every(c => c.match(/^[-:]+$/))) { }
|
||||
else { tableRows.push(cells); }
|
||||
return;
|
||||
} else {
|
||||
pushTable();
|
||||
}
|
||||
|
||||
const imgMatch = trimmed.match(/^!\[(.*?)\]\((.*?)\)$/);
|
||||
if (imgMatch) {
|
||||
pushList(); pushTable();
|
||||
elements.push(
|
||||
<div key={`img-${idx}`} className="relative w-full my-12 rounded-[2rem] overflow-hidden border border-black/10 dark:border-white/10 shadow-2xl bg-[#F5F5F7] dark:bg-[#111]">
|
||||
<img src={imgMatch[2]} alt={imgMatch[1]} className="w-full h-auto object-cover hover:scale-105 transition-transform duration-1000" loading="lazy" />
|
||||
</div>
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const h3Match = trimmed.match(/^###\s*(.*)/);
|
||||
if (h3Match) { pushList(); pushTable(); elements.push(<h3 key={idx} className="text-2xl mt-8 mb-4 font-medium text-[#0066CC] dark:text-[#00F0FF]">{parseInline(h3Match[1])}</h3>); return; }
|
||||
|
||||
const h2Match = trimmed.match(/^##\s*(.*)/);
|
||||
if (h2Match) { pushList(); pushTable(); elements.push(<h2 key={idx} className="text-3xl mt-10 mb-5 font-light text-[#1D1D1F] dark:text-white tracking-tight">{parseInline(h2Match[1])}</h2>); return; }
|
||||
|
||||
const h1Match = trimmed.match(/^#\s*(.*)/);
|
||||
if (h1Match) { pushList(); pushTable(); elements.push(<h1 key={idx} className="text-4xl md:text-5xl mt-12 mb-6 font-light text-[#1D1D1F] dark:text-white tracking-tight">{parseInline(h1Match[1])}</h1>); return; }
|
||||
|
||||
const quoteMatch = trimmed.match(/^>\s*(.*)/);
|
||||
if (quoteMatch) {
|
||||
pushList(); pushTable();
|
||||
elements.push(
|
||||
<blockquote key={idx} className="border-l-4 border-[#0066CC] dark:border-[#00F0FF] pl-6 py-2 my-8 text-xl font-light italic text-[#1D1D1F]/70 dark:text-[#A1A1A6] bg-[#0066CC]/5 dark:bg-[#00F0FF]/5 rounded-r-xl">
|
||||
{parseInline(quoteMatch[1])}
|
||||
</blockquote>
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const ulMatch = trimmed.match(/^[-*]\s*(.*)/);
|
||||
if (ulMatch) {
|
||||
isOrderedList = false;
|
||||
listItems.push(<li key={idx} className="leading-relaxed pl-2">{parseInline(ulMatch[1])}</li>);
|
||||
return;
|
||||
}
|
||||
|
||||
const olMatch = trimmed.match(/^\d+\.\s*(.*)/);
|
||||
if (olMatch) {
|
||||
isOrderedList = true;
|
||||
listItems.push(<li key={idx} className="leading-relaxed pl-2">{parseInline(olMatch[1])}</li>);
|
||||
return;
|
||||
}
|
||||
|
||||
pushList();
|
||||
elements.push(
|
||||
<p key={idx} className="text-[#1D1D1F]/80 dark:text-[#A1A1A6] font-light leading-relaxed mb-6 text-lg">
|
||||
{parseInline(trimmed)}
|
||||
</p>
|
||||
);
|
||||
});
|
||||
|
||||
pushList();
|
||||
pushTable();
|
||||
|
||||
return <>{elements}</>;
|
||||
};
|
||||
|
||||
// ── COMPONENTE PRINCIPAL (AHORA LEE EL LOCALE) ──
|
||||
export default async function ArticlePage({ params }: { params: Promise<{ slug: string, locale: string }> }) {
|
||||
const resolvedParams = await params;
|
||||
const { slug, locale } = resolvedParams;
|
||||
|
||||
const rawArticle = await prisma.newsArticle.findUnique({
|
||||
where: { slug }
|
||||
});
|
||||
|
||||
if (!rawArticle) {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col items-center justify-center text-center">
|
||||
<h1 className="text-2xl text-[#86868B] mb-4">Article not found</h1>
|
||||
<Link href={`/${locale}/news`} className="text-[#0066CC] hover:underline">Return to News Hub</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 🔥 TRADUCCIÓN MÁGICA ANTES DEL RENDER 🔥
|
||||
const article = getLocalizedData(rawArticle, locale);
|
||||
|
||||
let gallery: string[] = [];
|
||||
try { gallery = JSON.parse(article.galleryJson || "[]"); } catch (e) {}
|
||||
|
||||
return (
|
||||
<main className="relative min-h-screen pb-24">
|
||||
<BreathingField />
|
||||
|
||||
<div className="fixed top-24 left-6 z-50 hidden md:block">
|
||||
{/* EL BOTÓN DE VOLVER AHORA RESPETA EL IDIOMA */}
|
||||
<Link href={`/${locale}/news`} className="inline-flex items-center gap-2 text-sm font-medium text-[#86868B] hover:text-[#0066CC] dark:hover:text-[#4DA6FF] transition-colors py-2 px-4 bg-white/50 dark:bg-black/50 backdrop-blur-md rounded-full group shadow-sm border border-black/5 dark:border-white/10">
|
||||
<ArrowLeft size={16} className="group-hover:-translate-x-1 transition-transform" /> Back to News Hub
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<section className="relative w-full h-[50vh] md:h-[70vh] flex items-end justify-center overflow-hidden bg-[#1D1D1F]">
|
||||
{article.coverImage && (
|
||||
<Image src={`/news/${article.coverImage}`} alt={article.title} fill className="object-cover object-center opacity-60" priority />
|
||||
)}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-white via-white/80 dark:from-[#0A0A0C] dark:via-[#0A0A0C]/80 to-transparent" />
|
||||
|
||||
<div className="relative z-10 max-w-4xl w-full mx-auto px-6 pb-12 md:pb-20 text-center">
|
||||
<div className="flex flex-wrap items-center justify-center gap-4 text-xs font-semibold uppercase tracking-widest text-[#0066CC] dark:text-[#4DA6FF] mb-6">
|
||||
<span className="flex items-center gap-1.5 bg-[#0066CC]/10 dark:bg-[#4DA6FF]/10 px-3 py-1.5 rounded-full"><Tag size={14}/> {article.category}</span>
|
||||
<span className="flex items-center gap-1.5 text-[#86868B]"><Calendar size={14}/> {new Date(article.publishedAt).toLocaleDateString(locale === 'en' ? 'en-US' : locale, { month: 'long', day: 'numeric', year: 'numeric' })}</span>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-6xl font-medium text-[#1D1D1F] dark:text-[#F5F5F7] tracking-tight mb-6 leading-tight">
|
||||
{article.title}
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-[#86868B] dark:text-[#A1A1A6] font-light max-w-2xl mx-auto">
|
||||
{article.excerpt}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="relative z-10 max-w-3xl mx-auto px-6 mt-12 md:mt-20">
|
||||
|
||||
{/* 🔥 EL MARKDOWN TRADUCIDO AL VUELO 🔥 */}
|
||||
<div className="max-w-none mb-16">
|
||||
{renderMarkdown(article.content)}
|
||||
</div>
|
||||
|
||||
{gallery.length > 0 && (
|
||||
<div className="mt-16 pt-16 border-t border-black/5 dark:border-white/5">
|
||||
<h3 className="text-xl font-medium mb-8 text-[#1D1D1F] dark:text-white">Media Gallery</h3>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{gallery.map((imgSrc: string, idx: number) => (
|
||||
<div key={idx} className={`relative rounded-3xl overflow-hidden bg-[#1D1D1F] border border-black/10 dark:border-white/10 ${idx === 0 && gallery.length % 2 !== 0 ? 'sm:col-span-2 h-64 md:h-96' : 'h-48 md:h-64'}`}>
|
||||
<Image src={`/news/${imgSrc}`} alt={`Gallery image ${idx + 1}`} fill className="object-cover hover:scale-105 transition-transform duration-700" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-16 pt-8 border-t border-black/10 dark:border-white/10 flex justify-between items-center">
|
||||
<Link href={`/${locale}/news`} className="text-[#0066CC] dark:text-[#4DA6FF] font-medium flex items-center gap-2 hover:underline md:hidden">
|
||||
<ArrowLeft size={16} /> Back to News
|
||||
</Link>
|
||||
|
||||
{article.linkedinUrl ? (
|
||||
<a
|
||||
href={article.linkedinUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 text-sm font-semibold text-white bg-[#0A66C2] px-6 py-3 rounded-full hover:bg-[#004182] transition-all shadow-lg shadow-[#0A66C2]/20 ml-auto md:ml-0"
|
||||
>
|
||||
<Linkedin size={16} /> Join the conversation on LinkedIn
|
||||
</a>
|
||||
) : (
|
||||
<div className="text-xs text-[#86868B] italic hidden md:block">
|
||||
Internal Corporate Release
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { Newspaper, ArrowRight, Calendar } from "lucide-react";
|
||||
import BreathingField from "@/components/visuals/BreathingField";
|
||||
|
||||
import { getLocalizedData } from "@/lib/i18nHelper";
|
||||
import { getTranslations } from "next-intl/server"; // 🔥 IMPORTAMOS LA VERSIÓN DE SERVIDOR
|
||||
|
||||
export const revalidate = 60;
|
||||
|
||||
export default async function NewsHub({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const resolvedParams = await params;
|
||||
const locale = resolvedParams.locale;
|
||||
|
||||
// 🔥 LLAMAMOS AL DICCIONARIO
|
||||
const t = await getTranslations("NewsHub");
|
||||
|
||||
let rawArticles: any[] = [];
|
||||
try {
|
||||
rawArticles = await prisma.newsArticle.findMany({
|
||||
where: { isActive: true },
|
||||
orderBy: [{ order: 'asc' }, { publishedAt: 'desc' }]
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error fetching news:", error);
|
||||
}
|
||||
|
||||
const articles = rawArticles.map(article => getLocalizedData(article, locale));
|
||||
|
||||
const heroArticle = articles.length > 0 ? articles[0] : null;
|
||||
const gridArticles = articles.length > 1 ? articles.slice(1) : [];
|
||||
|
||||
return (
|
||||
<main className="relative min-h-screen pt-32 pb-24">
|
||||
<BreathingField />
|
||||
|
||||
<div className="relative z-10 max-w-7xl mx-auto px-6">
|
||||
<header className="mb-16 md:mb-24 text-center max-w-3xl mx-auto">
|
||||
<div className="inline-flex items-center justify-center gap-2 text-[#0066CC] dark:text-[#4DA6FF] mb-6 bg-[#0066CC]/10 dark:bg-[#4DA6FF]/10 px-4 py-2 rounded-full">
|
||||
<Newspaper size={18} />
|
||||
<span className="text-xs font-semibold uppercase tracking-widest">{t("subtitle")}</span>
|
||||
</div>
|
||||
<h1 className="text-5xl md:text-7xl font-light text-[#1D1D1F] dark:text-[#F5F5F7] tracking-tight mb-6">
|
||||
{t("title1")} <span className="font-medium">{t("title2")}</span>
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-[#86868B] dark:text-[#A1A1A6] font-light leading-relaxed">
|
||||
{t("description")}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{articles.length === 0 ? (
|
||||
<div className="text-center py-20 border-2 border-dashed border-black/10 dark:border-white/10 rounded-3xl">
|
||||
<p className="text-[#86868B] dark:text-[#A1A1A6]">{t("emptyState")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-6 md:gap-8">
|
||||
|
||||
{/* HERO ARTICLE */}
|
||||
{heroArticle && (
|
||||
<Link href={`/${locale}/news/${heroArticle.slug}`} className="group relative w-full rounded-[2rem] overflow-hidden bg-white/60 dark:bg-[#1D1D1F]/40 backdrop-blur-2xl border border-black/5 dark:border-white/10 flex flex-col md:flex-row shadow-lg hover:shadow-xl transition-all duration-500 hover:-translate-y-1">
|
||||
<div className="w-full md:w-1/2 h-56 md:h-[400px] relative overflow-hidden bg-[#1D1D1F]">
|
||||
{heroArticle.coverImage ? (
|
||||
<Image src={`/news/${heroArticle.coverImage}`} alt={heroArticle.title} fill className="object-cover transition-transform duration-700 group-hover:scale-105" />
|
||||
) : (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#0066CC]/20 to-[#0A0A0C] flex items-center justify-center"><Newspaper size={64} className="text-white/10" /></div>
|
||||
)}
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:p-10 flex flex-col justify-center">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<span className="text-[9px] font-bold uppercase tracking-widest text-[#0066CC] dark:text-[#4DA6FF] bg-[#0066CC]/10 dark:bg-[#4DA6FF]/10 px-2.5 py-1 rounded-full">{heroArticle.category}</span>
|
||||
<span className="text-[10px] font-medium text-[#86868B] flex items-center gap-1"><Calendar size={12}/> {new Date(heroArticle.publishedAt).toLocaleDateString(locale === 'en' ? 'en-US' : locale, { month: 'short', day: 'numeric', year: 'numeric' })}</span>
|
||||
</div>
|
||||
<h2 className="text-2xl md:text-3xl font-medium text-[#1D1D1F] dark:text-white mb-3 leading-tight group-hover:text-[#0066CC] dark:group-hover:text-[#4DA6FF] transition-colors">{heroArticle.title}</h2>
|
||||
<p className="text-sm text-[#86868B] dark:text-[#A1A1A6] leading-relaxed mb-6 line-clamp-3">{heroArticle.excerpt}</p>
|
||||
<span className="inline-flex items-center gap-1.5 text-xs font-semibold text-[#1D1D1F] dark:text-white mt-auto">
|
||||
{t("readFull")} <ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" />
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{/* GRID COLUMNAS */}
|
||||
{gridArticles.length > 0 && (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mt-4">
|
||||
{gridArticles.map((article) => (
|
||||
<Link key={article.id} href={`/${locale}/news/${article.slug}`} className="group flex flex-col bg-white/60 dark:bg-[#1D1D1F]/40 backdrop-blur-md border border-black/5 dark:border-white/10 rounded-3xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-500 hover:-translate-y-1">
|
||||
<div className="w-full h-40 relative overflow-hidden bg-[#1D1D1F]">
|
||||
{article.coverImage ? (
|
||||
<Image src={`/news/${article.coverImage}`} alt={article.title} fill className="object-cover transition-transform duration-700 group-hover:scale-105" />
|
||||
) : (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#0066CC]/10 to-[#0A0A0C]" />
|
||||
)}
|
||||
</div>
|
||||
<div className="p-5 flex flex-col flex-1">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<span className="text-[8px] font-bold uppercase tracking-widest text-[#0066CC] dark:text-[#4DA6FF]">{article.category}</span>
|
||||
<span className="text-[9px] text-[#86868B]">{new Date(article.publishedAt).toLocaleDateString(locale === 'en' ? 'en-US' : locale, { month: 'short', day: 'numeric' })}</span>
|
||||
</div>
|
||||
<h3 className="text-base font-medium text-[#1D1D1F] dark:text-white mb-2 leading-snug group-hover:text-[#0066CC] dark:group-hover:text-[#4DA6FF] transition-colors line-clamp-2">{article.title}</h3>
|
||||
<p className="text-xs text-[#86868B] dark:text-[#A1A1A6] line-clamp-2 mb-4">{article.excerpt}</p>
|
||||
<span className="mt-auto flex items-center gap-1.5 text-[11px] font-semibold text-[#1D1D1F] dark:text-white group-hover:text-[#0066CC] dark:group-hover:text-[#4DA6FF] transition-colors">
|
||||
{t("readMore")} <ArrowRight size={12} className="group-hover:translate-x-1 transition-transform" />
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
// src/app/[locale]/page.tsx
|
||||
// ✅ CORRECCIÓN: dynamic ya estaba, pero reforzamos el patrón de params
|
||||
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { getLocalizedData } from "@/lib/i18nHelper";
|
||||
|
||||
import BreathingField from "@/components/visuals/BreathingField";
|
||||
import ApplicationsDashboard from "@/components/sections/ApplicationsDashboard";
|
||||
import GlobalOperations from "@/components/sections/GlobalOperations";
|
||||
import PatrizioLegacy from "@/components/sections/PatrizioLegacy";
|
||||
import OurStory from "@/components/sections/OurStory";
|
||||
import ApplicationsDeep from "@/components/sections/ApplicationsDeep";
|
||||
import HeroReel from "@/components/sections/HeroReel";
|
||||
import WhatWeDo from "@/components/sections/WhatWeDo";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
// ✅ Next.js 16: params es Promise y DEBE ser awaiteado
|
||||
export default async function Home({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params;
|
||||
|
||||
// --- 1. LECTURA DE IMÁGENES ---
|
||||
let footageImages: string[] = [];
|
||||
try {
|
||||
const footageDir = path.join(process.cwd(), "public", "footage", "main");
|
||||
if (fs.existsSync(footageDir)) {
|
||||
const files = fs.readdirSync(footageDir);
|
||||
footageImages = files
|
||||
.filter(file => /\.(png|jpe?g|webp)$/i.test(file))
|
||||
.map(file => `/footage/main/${file}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error reading footage directory:", error);
|
||||
}
|
||||
|
||||
// --- 2. NODOS DEL GLOBO ---
|
||||
let mapNodes: any[] = [];
|
||||
try {
|
||||
const rawNodes = await prisma.globalNode.findMany({
|
||||
where: { isActive: true },
|
||||
select: {
|
||||
id: true, title: true, location: true, lat: true, lon: true,
|
||||
application: true, stats: true, nodeType: true, projectOverview: true,
|
||||
mediaFileName: true, energySavings: true, galleryJson: true,
|
||||
eventDate: true, translationsJson: true
|
||||
}
|
||||
});
|
||||
|
||||
mapNodes = rawNodes.map((node: any) => {
|
||||
const localizedNode = getLocalizedData(node as any, locale);
|
||||
return {
|
||||
...localizedNode,
|
||||
eventDate: localizedNode.eventDate ? localizedNode.eventDate.toISOString() : null
|
||||
};
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error fetching global nodes from DB:", error);
|
||||
}
|
||||
|
||||
// --- 3. APLICACIONES ---
|
||||
let dbApps: any[] = [];
|
||||
try {
|
||||
const rawApps = await prisma.application.findMany({
|
||||
select: {
|
||||
slug: true, title: true, subtitle: true, category: true,
|
||||
shortDescription: true, heroDescription: true,
|
||||
dashboardMetricsJson: true, isActive: true, translationsJson: true
|
||||
},
|
||||
orderBy: { createdAt: "asc" }
|
||||
});
|
||||
dbApps = rawApps.map((app: any) => getLocalizedData(app as any, locale));
|
||||
} catch (error) {
|
||||
console.error("Error fetching applications from DB:", error);
|
||||
}
|
||||
|
||||
// --- 4. LÍNEA DE TIEMPO ---
|
||||
let dbTimeline: any[] = [];
|
||||
try {
|
||||
const rawTimeline = await prisma.timelineEvent.findMany({
|
||||
where: { isActive: true },
|
||||
orderBy: { order: "asc" }
|
||||
});
|
||||
dbTimeline = rawTimeline.map((item: any) => getLocalizedData(item as any, locale));
|
||||
} catch (error) {
|
||||
console.error("Error fetching timeline from DB:", error);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="relative min-h-screen flex flex-col items-center w-full">
|
||||
<BreathingField />
|
||||
<div className="w-full overflow-hidden flex flex-col items-center justify-center">
|
||||
<HeroReel images={footageImages} />
|
||||
</div>
|
||||
<WhatWeDo />
|
||||
<div className="w-full overflow-hidden flex flex-col items-center">
|
||||
<ApplicationsDeep dbApps={dbApps} />
|
||||
<ApplicationsDashboard dbApps={dbApps} />
|
||||
<GlobalOperations dbNodes={mapNodes} dbApps={dbApps} />
|
||||
<OurStory dbTimeline={dbTimeline} />
|
||||
<PatrizioLegacy />
|
||||
<div className="h-64 w-full"></div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { X, KeyRound, Building2, User, Mail, LogOut, ShieldCheck, Sparkles, Loader2, Lock } from "lucide-react";
|
||||
import { loginClient, registerClientRequest, logoutClient, updateClientPassword } from "@/app/actions/clientAuth";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function AuthModal({ session }: { session: any }) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [mode, setMode] = useState<"LOGIN" | "REGISTER" | "PROFILE">(session ? "PROFILE" : "LOGIN");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
const handleOpen = (e: Event) => {
|
||||
const detail = (e as CustomEvent).detail;
|
||||
setIsOpen(true);
|
||||
setError(null);
|
||||
setSuccess(null);
|
||||
if (session) setMode("PROFILE");
|
||||
else if (detail?.mode) setMode(detail.mode);
|
||||
};
|
||||
window.addEventListener("flux:open-auth", handleOpen);
|
||||
return () => window.removeEventListener("flux:open-auth", handleOpen);
|
||||
}, [session]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const form = e.currentTarget;
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
const res = await loginClient(new FormData(form));
|
||||
|
||||
if (res.error) {
|
||||
setError(res.error);
|
||||
} else {
|
||||
setIsOpen(false);
|
||||
router.refresh();
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const handleRegister = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const form = e.currentTarget;
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
const res = await registerClientRequest(new FormData(form));
|
||||
|
||||
if (res.error) {
|
||||
setError(res.error);
|
||||
} else {
|
||||
setSuccess("Access requested successfully. We will notify you via email upon engineering approval.");
|
||||
form.reset();
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const handleChangePassword = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const form = e.currentTarget;
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
setSuccess(null);
|
||||
|
||||
const res = await updateClientPassword(new FormData(form));
|
||||
|
||||
if (res.error) {
|
||||
setError(res.error);
|
||||
} else {
|
||||
setSuccess("Password updated securely.");
|
||||
form.reset();
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
setIsLoading(true);
|
||||
await logoutClient();
|
||||
setIsOpen(false);
|
||||
router.refresh();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[200] flex items-center justify-center p-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="absolute inset-0 bg-black/60 backdrop-blur-md"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
className="relative w-full max-w-md bg-white dark:bg-[#111] rounded-[2rem] shadow-2xl overflow-hidden border border-black/5 dark:border-white/10"
|
||||
>
|
||||
{/* 🔥 FIX: Z-INDEX 100 PARA EVITAR BLOQUEOS */}
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="absolute top-4 right-4 p-2 bg-black/5 dark:bg-white/10 hover:bg-black/10 dark:hover:bg-white/20 rounded-full transition-colors z-[100]"
|
||||
>
|
||||
<X size={16} className="text-[#1D1D1F] dark:text-white" />
|
||||
</button>
|
||||
|
||||
<div className="bg-[#F5F5F7] dark:bg-[#0A0A0C] p-6 pb-4 border-b border-black/5 dark:border-white/5 text-center relative overflow-hidden">
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-32 bg-[#0066CC]/20 blur-[50px] rounded-full pointer-events-none" />
|
||||
|
||||
<div className="relative z-10 flex flex-col items-center justify-center mb-3">
|
||||
<img src="/flux-logo.svg" alt="FLUX" className="h-12 w-auto mb-2 drop-shadow-sm" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-light text-[#1D1D1F] dark:text-white relative z-10 flex items-center justify-center gap-2">
|
||||
<Lock size={20} className="text-[#86868B]" /> B2B Portal
|
||||
</h2>
|
||||
|
||||
{!session && (
|
||||
<div className="flex bg-black/5 dark:bg-white/5 rounded-xl p-1 mt-6 relative z-10">
|
||||
<button onClick={() => {setMode("LOGIN"); setError(null); setSuccess(null);}} className={`flex-1 py-2 text-xs font-semibold rounded-lg transition-all ${mode === "LOGIN" ? "bg-white dark:bg-[#1D1D1F] shadow text-[#1D1D1F] dark:text-white" : "text-[#86868B]"}`}>Sign In</button>
|
||||
<button onClick={() => {setMode("REGISTER"); setError(null); setSuccess(null);}} className={`flex-1 py-2 text-xs font-semibold rounded-lg transition-all ${mode === "REGISTER" ? "bg-white dark:bg-[#1D1D1F] shadow text-[#1D1D1F] dark:text-white" : "text-[#86868B]"}`}>Request Access</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
{error && <div className="mb-4 p-3 bg-rose-500/10 border border-rose-500/20 text-rose-500 text-xs rounded-xl flex items-start gap-2"><ShieldCheck size={14} className="shrink-0 mt-0.5"/> {error}</div>}
|
||||
{success && <div className="mb-4 p-3 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 text-xs rounded-xl flex items-start gap-2"><Sparkles size={14} className="shrink-0 mt-0.5"/> {success}</div>}
|
||||
|
||||
{mode === "LOGIN" && !session && (
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
<div>
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-[#86868B] mb-1 flex items-center gap-1.5"><Mail size={12}/> Corporate Email</label>
|
||||
<input name="email" type="email" required className="w-full bg-black/5 dark:bg-white/5 border border-transparent focus:border-[#0066CC] rounded-xl px-4 py-3 text-sm outline-none text-[#1D1D1F] dark:text-white transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-[#86868B] mb-1 flex items-center gap-1.5"><KeyRound size={12}/> Password</label>
|
||||
<input name="password" type="password" required className="w-full bg-black/5 dark:bg-white/5 border border-transparent focus:border-[#0066CC] rounded-xl px-4 py-3 text-sm outline-none text-[#1D1D1F] dark:text-white transition-colors" />
|
||||
</div>
|
||||
<button disabled={isLoading} className="w-full mt-2 bg-[#1D1D1F] dark:bg-white text-white dark:text-black py-3.5 rounded-xl text-sm font-semibold flex justify-center items-center gap-2 active:scale-[0.98] transition-transform">
|
||||
{isLoading ? <Loader2 size={16} className="animate-spin" /> : "Access Secure Portal"}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{mode === "REGISTER" && !session && (
|
||||
<form onSubmit={handleRegister} className="space-y-3">
|
||||
<div>
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-[#86868B] mb-1 flex items-center gap-1.5"><User size={12}/> Full Name</label>
|
||||
<input name="fullName" required className="w-full bg-black/5 dark:bg-white/5 border border-transparent focus:border-[#0066CC] rounded-xl px-4 py-2.5 text-sm outline-none text-[#1D1D1F] dark:text-white transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-[#86868B] mb-1 flex items-center gap-1.5"><Building2 size={12}/> Company Name</label>
|
||||
<input name="companyName" required className="w-full bg-black/5 dark:bg-white/5 border border-transparent focus:border-[#0066CC] rounded-xl px-4 py-2.5 text-sm outline-none text-[#1D1D1F] dark:text-white transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-[#86868B] mb-1 flex items-center gap-1.5"><Mail size={12}/> Work Email</label>
|
||||
<input name="email" type="email" required className="w-full bg-black/5 dark:bg-white/5 border border-transparent focus:border-[#0066CC] rounded-xl px-4 py-2.5 text-sm outline-none text-[#1D1D1F] dark:text-white transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-[#86868B] mb-1 flex items-center gap-1.5"><KeyRound size={12}/> Create Password</label>
|
||||
<input name="password" type="password" required className="w-full bg-black/5 dark:bg-white/5 border border-transparent focus:border-[#0066CC] rounded-xl px-4 py-2.5 text-sm outline-none text-[#1D1D1F] dark:text-white transition-colors" />
|
||||
</div>
|
||||
<button disabled={isLoading} className="w-full mt-4 bg-[#1D1D1F] dark:bg-white text-white dark:text-black py-3.5 rounded-xl text-sm font-semibold flex justify-center items-center gap-2 active:scale-[0.98] transition-transform">
|
||||
{isLoading ? <Loader2 size={16} className="animate-spin" /> : "Submit Request"}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{mode === "PROFILE" && session && (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-[#F5F5F7] dark:bg-white/5 p-4 rounded-2xl flex items-center gap-4 border border-black/5 dark:border-white/5">
|
||||
<div className="w-12 h-12 bg-[#0066CC] text-white rounded-full flex items-center justify-center text-xl font-light shrink-0">
|
||||
{session.name.charAt(0)}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-[#1D1D1F] dark:text-white truncate">{session.name}</p>
|
||||
<p className="text-xs text-[#86868B] truncate">{session.company}</p>
|
||||
<p className="text-[10px] text-[#0066CC] font-mono mt-0.5 truncate">{session.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
<form onSubmit={handleChangePassword} className="space-y-3 pt-4 border-t border-black/5 dark:border-white/10">
|
||||
<h3 className="text-xs font-semibold text-[#1D1D1F] dark:text-white mb-2">Update Security Credentials</h3>
|
||||
<input name="currentPassword" type="password" placeholder="Current Password" required className="w-full bg-black/5 dark:bg-white/5 border border-transparent focus:border-[#0066CC] rounded-xl px-4 py-2.5 text-sm outline-none text-[#1D1D1F] dark:text-white transition-colors" />
|
||||
<input name="newPassword" type="password" placeholder="New Password" required minLength={8} className="w-full bg-black/5 dark:bg-white/5 border border-transparent focus:border-[#0066CC] rounded-xl px-4 py-2.5 text-sm outline-none text-[#1D1D1F] dark:text-white transition-colors" />
|
||||
<button disabled={isLoading} className="w-full bg-black/5 dark:bg-white/10 hover:bg-black/10 text-[#1D1D1F] dark:text-white py-2.5 rounded-xl text-sm font-medium transition-colors">
|
||||
{isLoading ? <Loader2 size={16} className="animate-spin mx-auto" /> : "Change Password"}
|
||||
</button>
|
||||
</form>
|
||||
<button onClick={handleLogout} className="w-full flex items-center justify-center gap-2 text-rose-500 hover:bg-rose-500/10 py-3.5 rounded-xl text-sm font-semibold transition-colors">
|
||||
<LogOut size={16}/> Secure Logout
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
"use client";
|
||||
|
||||
import { useUIStore } from "@/lib/store/uiStore";
|
||||
import { Plus, Check, Wrench, Search, X, ChevronLeft, ChevronRight, Lock, KeyRound, UserCircle } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import PartDetailsModal from "./PartDetailsModal";
|
||||
import AuthModal from "./AuthModal";
|
||||
import { useRouter, usePathname, useSearchParams } from "next/navigation";
|
||||
|
||||
interface ComponentGridProps {
|
||||
initialParts: any[];
|
||||
locale: string;
|
||||
query: string;
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
totalItems: number;
|
||||
session: any | null; // 🔥 LA SESIÓN DETERMINA TODO
|
||||
}
|
||||
|
||||
export default function ComponentGrid({ initialParts, locale, query, currentPage, totalPages, totalItems, session }: ComponentGridProps) {
|
||||
const t = useTranslations("SpareParts");
|
||||
const addToCart = useUIStore(state => state.addToCart);
|
||||
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const [addedSku, setAddedSku] = useState<string | null>(null);
|
||||
const [selectedPart, setSelectedPart] = useState<any | null>(null);
|
||||
const [searchTerm, setSearchTerm] = useState(query);
|
||||
|
||||
useEffect(() => {
|
||||
const timeoutId = setTimeout(() => {
|
||||
if (searchTerm !== query && session) { // Solo busca si hay sesión
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
if (searchTerm) { params.set('q', searchTerm); params.set('page', '1'); }
|
||||
else { params.delete('q'); }
|
||||
router.push(`${pathname}?${params.toString()}`, { scroll: false });
|
||||
}
|
||||
}, 500);
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [searchTerm, router, pathname, searchParams, query, session]);
|
||||
|
||||
const handleAdd = (e: React.MouseEvent, part: any) => {
|
||||
e.stopPropagation();
|
||||
addToCart({ id: part.id, sku: part.sku, title: part.title, price: part.price, showPrice: part.showPrice, mediaUrl: part.coverImage });
|
||||
setAddedSku(part.sku);
|
||||
setTimeout(() => setAddedSku(null), 1500);
|
||||
};
|
||||
|
||||
const handlePageChange = (newPage: number) => {
|
||||
if (newPage < 1 || newPage > totalPages) return;
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.set('page', newPage.toString());
|
||||
router.push(`${pathname}?${params.toString()}`);
|
||||
};
|
||||
|
||||
// 🔥 EVENTO PARA ABRIR MODAL
|
||||
const openAuth = (mode: "LOGIN" | "REGISTER") => {
|
||||
window.dispatchEvent(new CustomEvent('flux:open-auth', { detail: { mode } }));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<AuthModal session={session} />
|
||||
|
||||
{/* 🔥 BOTÓN FLOTANTE DE PERFIL / LOGIN (Arriba a la derecha) */}
|
||||
<div className="absolute top-32 right-6 md:right-12 z-50">
|
||||
<button
|
||||
onClick={() => window.dispatchEvent(new CustomEvent('flux:open-auth'))}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-[#111] border border-black/10 dark:border-white/10 rounded-full text-sm font-medium text-[#1D1D1F] dark:text-white shadow-sm hover:shadow-md transition-all"
|
||||
>
|
||||
{session ? <><UserCircle size={16}/> {session.name}</> : <><Lock size={16}/> B2B Login</>}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 🛑 ESTADO BLOQUEADO (Visitantes sin sesión) */}
|
||||
{!session ? (
|
||||
<div className="mt-8 py-24 flex flex-col items-center justify-center text-center border border-dashed border-black/10 dark:border-white/10 rounded-[2rem] bg-white/30 dark:bg-[#111]/30">
|
||||
<div className="w-20 h-20 bg-black/5 dark:bg-white/5 rounded-full flex items-center justify-center mb-6">
|
||||
<Lock size={32} className="text-[#1D1D1F] dark:text-white" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-light text-[#1D1D1F] dark:text-white mb-3">Access Restricted</h3>
|
||||
<p className="text-[#86868B] max-w-md mx-auto mb-8">
|
||||
The FLUX Component Matrix is an exclusive B2B portal. Please sign in with your corporate account or request access to view components, pricing, and technical datasheets.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<button onClick={() => openAuth("LOGIN")} className="px-8 py-3.5 rounded-xl text-sm font-semibold bg-[#1D1D1F] dark:bg-white text-white dark:text-black flex items-center justify-center gap-2 transition-transform active:scale-95"><KeyRound size={16}/> Sign In</button>
|
||||
<button onClick={() => openAuth("REGISTER")} className="px-8 py-3.5 rounded-xl text-sm font-semibold bg-black/5 dark:bg-white/10 text-[#1D1D1F] dark:text-white hover:bg-black/10 dark:hover:bg-white/20 transition-all active:scale-95">Request Access</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* ✅ ESTADO DESBLOQUEADO (Catálogo Completo) */
|
||||
<>
|
||||
<div className="flex flex-col md:flex-row justify-between items-center gap-4 mb-8">
|
||||
<div className="relative w-full md:w-96">
|
||||
<div className="absolute inset-y-0 left-4 flex items-center pointer-events-none"><Search size={18} className="text-[#86868B]" /></div>
|
||||
<input type="text" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} placeholder="Search by SKU, name or spec..." className="w-full bg-white dark:bg-[#111] border border-black/10 dark:border-white/10 rounded-full pl-12 pr-10 py-3.5 text-sm text-[#1D1D1F] dark:text-white outline-none focus:border-[#0066CC] dark:focus:border-amber-500 transition-colors shadow-sm" />
|
||||
{searchTerm && <button onClick={() => setSearchTerm("")} className="absolute inset-y-0 right-4 flex items-center text-[#86868B] hover:text-[#1D1D1F] dark:hover:text-white transition-colors"><X size={16} /></button>}
|
||||
</div>
|
||||
<div className="text-sm text-[#86868B] font-medium">{totalItems} {totalItems === 1 ? "component found" : "components found"}</div>
|
||||
</div>
|
||||
|
||||
{initialParts.length === 0 ? (
|
||||
<div className="py-20 flex flex-col items-center justify-center text-center border border-dashed border-black/10 dark:border-white/10 rounded-[2rem] bg-white/30 dark:bg-[#111]/30">
|
||||
<Wrench size={48} className="text-[#86868B]/30 mb-4" />
|
||||
<h3 className="text-lg font-medium text-[#1D1D1F] dark:text-white mb-2">No components found</h3>
|
||||
<button onClick={() => setSearchTerm("")} className="mt-4 text-sm text-[#0066CC] dark:text-amber-500 font-medium hover:underline">Clear search</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
{initialParts.map((part, idx) => {
|
||||
const isAddedRecently = addedSku === part.sku;
|
||||
return (
|
||||
<motion.div key={part.sku} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4, delay: idx * 0.05 }} onClick={() => setSelectedPart(part)} className="group flex flex-col bg-white dark:bg-[#111] rounded-[2rem] border border-black/5 dark:border-white/5 overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 cursor-pointer">
|
||||
<div className="aspect-square bg-black/5 dark:bg-black/40 relative overflow-hidden flex items-center justify-center p-6">
|
||||
{part.coverImage ? <img src={`/parts/${part.sku.toLowerCase()}/${part.coverImage}`} alt={part.title} className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-500" /> : <Wrench size={48} className="text-black/10 dark:text-white/10" />}
|
||||
<div className="absolute top-4 left-4 bg-white/80 dark:bg-black/60 backdrop-blur px-2.5 py-1 rounded text-[10px] font-mono tracking-widest text-[#1D1D1F] dark:text-white border border-black/10 dark:border-white/10">{part.sku}</div>
|
||||
</div>
|
||||
<div className="p-6 flex flex-col flex-1">
|
||||
<h3 className="font-medium text-[#1D1D1F] dark:text-white mb-1 line-clamp-2">{part.title}</h3>
|
||||
<div className="mt-auto pt-4 flex items-center justify-between">
|
||||
{part.showPrice && part.price ? <span className="font-mono text-lg text-[#1D1D1F] dark:text-[#F5F5F7]">€{part.price.toFixed(2)}</span> : <span className="text-xs uppercase tracking-widest text-[#86868B] font-semibold">{t("quoteBased")}</span>}
|
||||
<button onClick={(e) => handleAdd(e, part)} className={`w-10 h-10 rounded-full flex items-center justify-center transition-all z-10 ${isAddedRecently ? "bg-emerald-500 text-white" : "bg-[#F5F5F7] dark:bg-white/5 hover:bg-[#1D1D1F] hover:text-white dark:hover:bg-amber-500 dark:hover:text-black text-[#1D1D1F] dark:text-white"}`}>
|
||||
{isAddedRecently ? <Check size={18} /> : <Plus size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-center gap-4 mt-12">
|
||||
<button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1} className="p-3 rounded-full bg-white dark:bg-[#111] border border-black/10 dark:border-white/10 text-[#1D1D1F] dark:text-white disabled:opacity-30 disabled:cursor-not-allowed hover:bg-black/5 dark:hover:bg-white/5 transition-colors"><ChevronLeft size={20} /></button>
|
||||
<span className="text-sm font-medium text-[#86868B]">Page <strong className="text-[#1D1D1F] dark:text-white">{currentPage}</strong> of {totalPages}</span>
|
||||
<button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages} className="p-3 rounded-full bg-white dark:bg-[#111] border border-black/10 dark:border-white/10 text-[#1D1D1F] dark:text-white disabled:opacity-30 disabled:cursor-not-allowed hover:bg-black/5 dark:hover:bg-white/5 transition-colors"><ChevronRight size={20} /></button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<PartDetailsModal part={selectedPart} isOpen={!!selectedPart} onClose={() => setSelectedPart(null)} />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,203 @@
|
||||
"use client";
|
||||
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { X, Wrench, ShoppingBag, ChevronLeft, ChevronRight, Tag, Info, Play, Lock } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useUIStore } from "@/lib/store/uiStore";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
// 🔥 IMPORTAMOS TU SUPER PARSER
|
||||
import { renderMarkdown } from "@/lib/markdownParser";
|
||||
|
||||
interface PartDetailsModalProps {
|
||||
part: any;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function PartDetailsModal({ part, isOpen, onClose }: PartDetailsModalProps) {
|
||||
const [currentMediaIdx, setCurrentMediaIdx] = useState(0);
|
||||
const addToCart = useUIStore(state => state.addToCart);
|
||||
const t = useTranslations("SpareParts");
|
||||
|
||||
if (!isOpen || !part) return null;
|
||||
|
||||
// Parseamos la galería y especificaciones de forma segura
|
||||
let media: string[] = [];
|
||||
let specs: {label: string, value: string}[] = [];
|
||||
try { media = JSON.parse(part.mediaJson || "[]"); } catch {}
|
||||
try { specs = JSON.parse(part.specsJson || "[]"); } catch {}
|
||||
|
||||
const handleAddToCart = () => {
|
||||
addToCart({
|
||||
id: part.id,
|
||||
sku: part.sku,
|
||||
title: part.title,
|
||||
price: part.price,
|
||||
showPrice: part.showPrice,
|
||||
mediaUrl: media.length > 0 ? media[0] : undefined,
|
||||
});
|
||||
onClose();
|
||||
};
|
||||
|
||||
const nextMedia = () => setCurrentMediaIdx((prev) => (prev + 1) % media.length);
|
||||
const prevMedia = () => setCurrentMediaIdx((prev) => (prev - 1 + media.length) % media.length);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-6 lg:p-12">
|
||||
{/* Backdrop con Blur */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
|
||||
onClick={onClose}
|
||||
className="absolute inset-0 bg-black/60 dark:bg-black/80 backdrop-blur-md"
|
||||
/>
|
||||
|
||||
{/* Contenedor Principal del Modal */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: 20, scale: 0.95 }}
|
||||
transition={{ type: "spring", damping: 25, stiffness: 300 }}
|
||||
className="relative w-full max-w-5xl bg-white dark:bg-[#111] rounded-[2rem] shadow-2xl overflow-hidden flex flex-col md:flex-row max-h-[90vh]"
|
||||
>
|
||||
{/* Botón Cerrar (Flotante) */}
|
||||
<button onClick={onClose} className="absolute top-4 right-4 z-50 p-2 bg-black/10 dark:bg-white/10 hover:bg-black/20 dark:hover:bg-white/20 text-[#1D1D1F] dark:text-white rounded-full transition-colors">
|
||||
<X size={20} />
|
||||
</button>
|
||||
|
||||
{/* SECCIÓN IZQUIERDA: Visor Multimedia (50% ancho en desktop) */}
|
||||
<div className="w-full md:w-1/2 bg-[#F5F5F7] dark:bg-[#0A0A0C] relative flex flex-col border-r border-black/5 dark:border-white/5">
|
||||
<div className="flex-1 relative flex items-center justify-center min-h-[300px] md:min-h-full p-8 group">
|
||||
{media.length > 0 ? (
|
||||
<>
|
||||
{media[currentMediaIdx].endsWith('.mp4') || media[currentMediaIdx].endsWith('.mov') ? (
|
||||
<video
|
||||
src={`/parts/${part.sku.toLowerCase()}/${media[currentMediaIdx]}`}
|
||||
controls
|
||||
className="w-full h-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src={`/parts/${part.sku.toLowerCase()}/${media[currentMediaIdx]}`}
|
||||
alt={`${part.title} preview`}
|
||||
className="w-full h-full object-contain drop-shadow-xl"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Controles de Galería (si hay más de 1 archivo) */}
|
||||
{media.length > 1 && (
|
||||
<div className="absolute inset-x-4 flex justify-between opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button onClick={prevMedia} className="p-2 bg-white/80 dark:bg-black/60 backdrop-blur rounded-full text-[#1D1D1F] dark:text-white hover:scale-110 transition-transform"><ChevronLeft size={24} /></button>
|
||||
<button onClick={nextMedia} className="p-2 bg-white/80 dark:bg-black/60 backdrop-blur rounded-full text-[#1D1D1F] dark:text-white hover:scale-110 transition-transform"><ChevronRight size={24} /></button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col items-center text-[#86868B]/40">
|
||||
<Wrench size={64} className="mb-4" />
|
||||
<p className="text-sm font-medium uppercase tracking-widest">No Media Available</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Miniaturas de Galería */}
|
||||
{media.length > 1 && (
|
||||
<div className="h-20 bg-white/50 dark:bg-black/40 border-t border-black/5 dark:border-white/5 flex items-center gap-2 px-4 overflow-x-auto [scrollbar-width:none] shrink-0">
|
||||
{media.map((file, idx) => {
|
||||
const isVideo = file.endsWith('.mp4') || file.endsWith('.mov');
|
||||
return (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => setCurrentMediaIdx(idx)}
|
||||
className={`h-14 w-14 shrink-0 rounded-xl overflow-hidden border-2 transition-all relative ${idx === currentMediaIdx ? 'border-[#0066CC] dark:border-amber-500' : 'border-transparent opacity-50 hover:opacity-100'}`}
|
||||
>
|
||||
{isVideo ? (
|
||||
<div className="w-full h-full bg-black flex items-center justify-center text-white"><Play size={16} /></div>
|
||||
) : (
|
||||
<img src={`/parts/${part.sku.toLowerCase()}/${file}`} alt="" className="w-full h-full object-cover bg-black/5 dark:bg-white/5" />
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* SECCIÓN DERECHA: Información y Especificaciones */}
|
||||
<div className="w-full md:w-1/2 flex flex-col h-[50vh] md:h-auto">
|
||||
|
||||
{/* Cabecera del Producto */}
|
||||
<div className="p-6 md:p-8 border-b border-black/5 dark:border-white/5 shrink-0 bg-white dark:bg-[#111]">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="px-2.5 py-1 bg-black/5 dark:bg-white/10 text-[10px] font-mono font-bold tracking-widest text-[#1D1D1F] dark:text-white rounded border border-black/10 dark:border-white/10">
|
||||
{part.sku}
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-2xl md:text-3xl font-light text-[#1D1D1F] dark:text-white mb-4 leading-tight">
|
||||
{part.title}
|
||||
</h2>
|
||||
<div className="flex items-end justify-between">
|
||||
<div>
|
||||
<p className="text-[10px] uppercase tracking-widest text-[#86868B] font-semibold mb-1">Unit Price</p>
|
||||
{part.showPrice && part.price ? (
|
||||
<p className="text-3xl font-mono font-medium text-[#1D1D1F] dark:text-white">€{part.price.toFixed(2)}</p>
|
||||
) : (
|
||||
<p className="text-lg uppercase tracking-widest text-[#86868B] font-semibold">{t("quoteBased")}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cuerpo Desplazable (Markdown + Specs) */}
|
||||
<div className="flex-1 overflow-y-auto p-6 md:p-8 space-y-8 [scrollbar-width:none] bg-[#F5F5F7]/30 dark:bg-transparent">
|
||||
|
||||
{/* Descripción (Usando el parser personalizado) */}
|
||||
{part.description && part.description !== "Draft description..." && (
|
||||
<div>
|
||||
<h3 className="text-xs uppercase tracking-widest text-[#86868B] font-semibold mb-4 flex items-center gap-2">
|
||||
<Info size={14} /> Product Overview
|
||||
</h3>
|
||||
<div className="max-w-none">
|
||||
{/* 🔥 APLICAMOS TU PARSER AQUÍ 🔥 */}
|
||||
{renderMarkdown(part.description)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Especificaciones Técnicas */}
|
||||
{specs.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-xs uppercase tracking-widest text-[#86868B] font-semibold mb-4 flex items-center gap-2">
|
||||
<Tag size={14} /> Technical Specifications
|
||||
</h3>
|
||||
<div className="bg-white dark:bg-black/40 rounded-2xl overflow-hidden border border-black/5 dark:border-white/5 shadow-sm">
|
||||
{specs.map((spec, idx) => (
|
||||
<div key={idx} className="flex justify-between p-3.5 border-b border-black/5 dark:border-white/5 last:border-0 hover:bg-black/5 dark:hover:bg-white/5 transition-colors">
|
||||
<span className="text-xs uppercase tracking-wider font-semibold text-[#86868B]">{spec.label}</span>
|
||||
<span className="text-sm font-medium text-[#1D1D1F] dark:text-white text-right">{spec.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Botonera Fija (Footer) */}
|
||||
<div className="p-6 md:p-8 border-t border-black/5 dark:border-white/5 shrink-0 bg-white dark:bg-[#111]">
|
||||
<button
|
||||
onClick={handleAddToCart}
|
||||
className="w-full bg-[#1D1D1F] dark:bg-amber-500 text-white dark:text-black py-4 rounded-xl font-semibold flex items-center justify-center gap-2 transition-transform active:scale-[0.98] hover:shadow-lg dark:hover:shadow-[0_0_20px_rgba(245,158,11,0.3)]"
|
||||
>
|
||||
<ShoppingBag size={18} /> Add to Operations Cart
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { getLocalizedData } from "@/lib/i18nHelper";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { Suspense } from "react";
|
||||
import ComponentGrid from "./_components/ComponentGrid";
|
||||
import { Metadata } from "next";
|
||||
import { getClientSession } from "@/app/actions/clientAuth";
|
||||
|
||||
export const revalidate = 0;
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Component Matrix | FLUX",
|
||||
robots: "noindex, nofollow",
|
||||
};
|
||||
|
||||
export default async function PartsCatalogPage({
|
||||
params, searchParams
|
||||
}: { params: Promise<{ locale: string }>; searchParams: Promise<{ q?: string; page?: string }>; }) {
|
||||
|
||||
const resolvedParams = await params;
|
||||
const resolvedSearchParams = await searchParams;
|
||||
|
||||
const locale = resolvedParams.locale;
|
||||
const query = resolvedSearchParams.q || "";
|
||||
const currentPage = parseInt(resolvedSearchParams.page || "1", 10);
|
||||
|
||||
const t = await getTranslations({ locale, namespace: "SpareParts" });
|
||||
|
||||
const session = await getClientSession();
|
||||
const isAuthenticated = !!session;
|
||||
|
||||
const rawHero = await prisma.pageContent.findUnique({ where: { slug: "parts-catalog" } });
|
||||
const heroData = rawHero ? getLocalizedData(rawHero, locale) : null;
|
||||
|
||||
let totalItems = 0;
|
||||
let translatedParts: any[] = [];
|
||||
let totalPages = 0;
|
||||
|
||||
if (isAuthenticated) {
|
||||
const ITEMS_PER_PAGE = 12;
|
||||
const whereClause = { isActive: true, ...(query ? { OR: [{ title: { contains: query, mode: "insensitive" as const } }, { sku: { contains: query, mode: "insensitive" as const } }, { description: { contains: query, mode: "insensitive" as const } }] } : {}) };
|
||||
|
||||
const [count, rawParts] = await Promise.all([
|
||||
prisma.sparePart.count({ where: whereClause }),
|
||||
prisma.sparePart.findMany({ where: whereClause, orderBy: { createdAt: "desc" }, skip: (currentPage - 1) * ITEMS_PER_PAGE, take: ITEMS_PER_PAGE })
|
||||
]);
|
||||
|
||||
totalItems = count;
|
||||
totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
|
||||
|
||||
translatedParts = rawParts.map((part: any) => {
|
||||
const localized = getLocalizedData(part, locale);
|
||||
let coverImage = null;
|
||||
try { const media = JSON.parse(localized.mediaJson || "[]"); if (media.length > 0) coverImage = media[0]; } catch (e) {}
|
||||
return { id: localized.id, sku: localized.sku, title: localized.title, description: localized.description, price: localized.price, showPrice: localized.showPrice, coverImage };
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-[#F5F5F7] dark:bg-[#050505] pt-32 pb-24 relative">
|
||||
<div className="max-w-7xl mx-auto px-6 md:px-12">
|
||||
|
||||
{/* CABECERA (Visible para todos) */}
|
||||
<div className="mb-12 mt-12 md:mt-0">
|
||||
<h1 className="text-4xl md:text-6xl font-light text-[#1D1D1F] dark:text-white tracking-tight mb-4">
|
||||
{heroData?.title || t("title1")} <span className="font-medium italic">{heroData?.subtitle || t("title2")}</span>
|
||||
</h1>
|
||||
<p className="text-[#86868B] text-lg max-w-2xl font-light">
|
||||
{heroData?.description || t("description")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* GRID LIMPIO Y SIN ERRORES DE HIDRATACIÓN */}
|
||||
<Suspense fallback={<div className="h-64 flex items-center justify-center text-[#86868B]">Loading Component Matrix...</div>}>
|
||||
<ComponentGrid
|
||||
initialParts={translatedParts}
|
||||
locale={locale}
|
||||
query={query}
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
totalItems={totalItems}
|
||||
session={session}
|
||||
/>
|
||||
</Suspense>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
"use server";
|
||||
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import bcrypt from "bcryptjs";
|
||||
import { cookies } from "next/headers";
|
||||
import { SignJWT, jwtVerify } from "jose";
|
||||
|
||||
const getSecretKey = () => new TextEncoder().encode(process.env.SESSION_SECRET || "flux-super-secret-key-2026");
|
||||
|
||||
export async function registerClientRequest(formData: FormData) {
|
||||
const fullName = formData.get("fullName") as string;
|
||||
const email = formData.get("email") as string;
|
||||
const companyName = formData.get("companyName") as string;
|
||||
const password = formData.get("password") as string;
|
||||
|
||||
if (!fullName || !email || !companyName || !password) return { error: "All fields are required." };
|
||||
|
||||
try {
|
||||
const existing = await prisma.clientUser.findUnique({ where: { email: email.toLowerCase().trim() } });
|
||||
if (existing) return { error: "Email is already registered." };
|
||||
|
||||
const passwordHash = await bcrypt.hash(password, 12);
|
||||
|
||||
const client = await prisma.clientUser.create({
|
||||
data: { email: email.toLowerCase().trim(), passwordHash, fullName, companyName, isApproved: false }
|
||||
});
|
||||
|
||||
const year = new Date().getFullYear();
|
||||
const count = await prisma.operationsSignal.count({ where: { ticketId: { startsWith: `ACC-${year}` } } });
|
||||
const seq = String(count + 1).padStart(4, "0");
|
||||
|
||||
await prisma.operationsSignal.create({
|
||||
data: {
|
||||
ticketId: `ACC-${year}-${seq}`, type: "ACCESS_REQUEST", status: "PENDING",
|
||||
clientName: fullName, clientEmail: email, clientCompany: companyName, clientId: client.id,
|
||||
message: `New B2B portal access request from ${companyName}. Please verify their credentials before approving.`,
|
||||
}
|
||||
});
|
||||
|
||||
return { success: true };
|
||||
} catch (error) { return { error: "An error occurred during registration." }; }
|
||||
}
|
||||
|
||||
export async function loginClient(formData: FormData) {
|
||||
const email = formData.get("email") as string;
|
||||
const password = formData.get("password") as string;
|
||||
|
||||
if (!email || !password) return { error: "Email and password are required." };
|
||||
|
||||
try {
|
||||
const user = await prisma.clientUser.findUnique({ where: { email: email.toLowerCase().trim() } });
|
||||
if (!user) return { error: "Invalid credentials." };
|
||||
if (!user.isApproved) return { error: "Your account is still pending engineering approval." };
|
||||
|
||||
const isValid = await bcrypt.compare(password, user.passwordHash);
|
||||
if (!isValid) return { error: "Invalid credentials." };
|
||||
|
||||
await prisma.clientUser.update({ where: { id: user.id }, data: { lastLoginAt: new Date() } });
|
||||
|
||||
const token = await new SignJWT({ userId: user.id, email: user.email, name: user.fullName, company: user.companyName })
|
||||
.setProtectedHeader({ alg: 'HS256' })
|
||||
.setExpirationTime('7d')
|
||||
.sign(getSecretKey());
|
||||
|
||||
const cookieStore = await cookies();
|
||||
cookieStore.set("flux_b2b_session", token, {
|
||||
httpOnly: true, secure: process.env.NODE_ENV === "production",
|
||||
sameSite: "lax", maxAge: 60 * 60 * 24 * 7, path: "/",
|
||||
});
|
||||
|
||||
return { success: true };
|
||||
} catch (error) { return { error: "Login failed." }; }
|
||||
}
|
||||
|
||||
export async function logoutClient() {
|
||||
const cookieStore = await cookies();
|
||||
cookieStore.delete("flux_b2b_session");
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
export async function getClientSession() {
|
||||
const cookieStore = await cookies();
|
||||
const token = cookieStore.get("flux_b2b_session")?.value;
|
||||
if (!token) return null;
|
||||
try {
|
||||
const { payload } = await jwtVerify(token, getSecretKey());
|
||||
return payload as { userId: string; email: string; name: string; company: string };
|
||||
} catch (error) { return null; }
|
||||
}
|
||||
|
||||
export async function updateClientPassword(formData: FormData) {
|
||||
const session = await getClientSession();
|
||||
if (!session) return { error: "Unauthorized." };
|
||||
const currentPassword = formData.get("currentPassword") as string;
|
||||
const newPassword = formData.get("newPassword") as string;
|
||||
|
||||
try {
|
||||
const user = await prisma.clientUser.findUnique({ where: { id: session.userId } });
|
||||
if (!user) return { error: "User not found." };
|
||||
|
||||
const isValid = await bcrypt.compare(currentPassword, user.passwordHash);
|
||||
if (!isValid) return { error: "Current password is incorrect." };
|
||||
|
||||
const newHash = await bcrypt.hash(newPassword, 12);
|
||||
await prisma.clientUser.update({ where: { id: user.id }, data: { passwordHash: newHash } });
|
||||
|
||||
return { success: true };
|
||||
} catch (error) { return { error: "Failed to update password." }; }
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
// /src/app/actions/operations.ts
|
||||
"use server";
|
||||
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { sendEmail } from "@/lib/mailer";
|
||||
|
||||
// ── Helper: Generate sequential ticket ID ──
|
||||
async function generateTicketId(type: string): Promise<string> {
|
||||
// Prefix based on type
|
||||
const prefix = type === "CONSULTATION" ? "CON" : type === "DIAGNOSTIC" ? "DIA" : "REQ";
|
||||
const year = new Date().getFullYear();
|
||||
|
||||
// Count existing tickets of this type this year to make sequential
|
||||
const count = await prisma.operationsSignal.count({
|
||||
where: {
|
||||
ticketId: { startsWith: `${prefix}-${year}` },
|
||||
},
|
||||
});
|
||||
|
||||
const seq = String(count + 1).padStart(4, "0");
|
||||
return `${prefix}-${year}-${seq}`;
|
||||
}
|
||||
|
||||
// ── Helper: Resolve email targets from NotificationRoute ──
|
||||
async function getTargetEmails(type: string): Promise<string[]> {
|
||||
const route = await prisma.notificationRoute.findUnique({
|
||||
where: { routeType: type },
|
||||
});
|
||||
|
||||
if (route && route.isActive && route.emails) {
|
||||
return route.emails.split(",").map((e: string) => e.trim()).filter(Boolean);
|
||||
}
|
||||
|
||||
// Fallbacks
|
||||
const fallbacks: Record<string, string> = {
|
||||
ORDER: "sales@fluxsrl.com",
|
||||
DIAGNOSTIC: "support@fluxsrl.com",
|
||||
CONSULTATION: "engineering@fluxsrl.com",
|
||||
};
|
||||
return [fallbacks[type] || "info@fluxsrl.com"];
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// MAIN: Submit an operations signal (ORDER, DIAGNOSTIC, CONSULTATION)
|
||||
// Called from CartDrawer.tsx
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
export async function submitOperationsSignal(payload: {
|
||||
type: string;
|
||||
clientName: string;
|
||||
clientEmail: string;
|
||||
clientCompany: string;
|
||||
clientPhone?: string;
|
||||
message?: string;
|
||||
cartPayload: string;
|
||||
attachedFiles: string;
|
||||
}) {
|
||||
try {
|
||||
const ticketId = await generateTicketId(payload.type);
|
||||
|
||||
// AI analysis placeholder
|
||||
let aiAnalysis = null;
|
||||
if (payload.message && payload.message.length > 20) {
|
||||
aiAnalysis = `[AI SUMMARY]\nClient requires assistance. Type: ${payload.type}. Priority: To be determined.\n\n[CLIENT MESSAGE]\n${payload.message}`;
|
||||
}
|
||||
|
||||
// Save to DB
|
||||
const signal = await prisma.operationsSignal.create({
|
||||
data: {
|
||||
ticketId,
|
||||
type: payload.type,
|
||||
clientName: payload.clientName,
|
||||
clientEmail: payload.clientEmail,
|
||||
clientCompany: payload.clientCompany,
|
||||
clientPhone: payload.clientPhone,
|
||||
message: payload.message,
|
||||
cartPayload: payload.cartPayload,
|
||||
attachedFiles: payload.attachedFiles,
|
||||
aiAnalysis,
|
||||
status: "PENDING",
|
||||
},
|
||||
});
|
||||
|
||||
// Send email notification
|
||||
const targetEmails = await getTargetEmails(payload.type);
|
||||
const appUrl = process.env.NEXT_PUBLIC_APP_URL || "https://flux.com";
|
||||
|
||||
const emailResult = await sendEmail({
|
||||
to: targetEmails,
|
||||
subject: `[${payload.type}] New Signal from ${payload.clientCompany} — ${ticketId}`,
|
||||
html: generateRichEmailHtml(payload, ticketId, aiAnalysis, appUrl),
|
||||
replyTo: payload.clientEmail,
|
||||
});
|
||||
|
||||
// Track email delivery in DB
|
||||
await prisma.operationsSignal.update({
|
||||
where: { id: signal.id },
|
||||
data: {
|
||||
emailSentTo: emailResult.sentTo.join(", "),
|
||||
emailSentAt: emailResult.sentAt,
|
||||
emailError: emailResult.error,
|
||||
},
|
||||
});
|
||||
|
||||
return { success: true, ticketId, emailSent: emailResult.success };
|
||||
} catch (error) {
|
||||
console.error("Error submitting signal:", error);
|
||||
return { error: "Failed to submit request. Please try again." };
|
||||
}
|
||||
}
|
||||
|
||||
// ── Rich Email HTML Generator ──
|
||||
// ── Rich Email HTML Generator ──
|
||||
function generateRichEmailHtml(payload: any, ticketId: string, aiAnalysis: string | null, appUrl: string) {
|
||||
let cartItems = [];
|
||||
let files = [];
|
||||
try { cartItems = JSON.parse(payload.cartPayload || "[]"); } catch {}
|
||||
try { files = JSON.parse(payload.attachedFiles || "[]"); } catch {}
|
||||
|
||||
const cartRows = cartItems.map((item: any) => `
|
||||
<tr>
|
||||
<td style="padding: 16px 12px; border-bottom: 1px solid #E5E5EA;">
|
||||
<strong style="color: #1D1D1F; font-size: 14px;">${item.title}</strong><br/>
|
||||
<span style="color: #86868B; font-size: 11px; font-family: monospace;">SKU: ${item.sku}</span>
|
||||
</td>
|
||||
<td style="padding: 16px 12px; border-bottom: 1px solid #E5E5EA; text-align: center; font-family: monospace; font-weight: 600; color: #1D1D1F;">${item.quantity}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
|
||||
const fileLinks = files.map((fileUrl: string) => {
|
||||
const isVideo = fileUrl.endsWith('.mp4') || fileUrl.endsWith('.mov');
|
||||
return `<a href="${appUrl}${fileUrl}" style="display: inline-block; padding: 10px 16px; background: #0066CC; color: white; text-decoration: none; border-radius: 8px; margin: 4px 8px 4px 0; font-size: 13px; font-weight: 600; text-align: center;">View ${isVideo ? 'Video' : 'Image'}</a>`;
|
||||
}).join('');
|
||||
|
||||
return `
|
||||
<div style="background-color: #F5F5F7; padding: 40px 20px; width: 100%; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
|
||||
<div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.06);">
|
||||
|
||||
<div style="padding: 40px 32px 32px 32px; text-align: center; border-bottom: 1px solid #E5E5EA;">
|
||||
<img src="${appUrl}/logoEmail.png" alt="FLUX SRL" style="height: 50px; width: auto; object-fit: contain; margin-bottom: 24px;" />
|
||||
<p style="color: #0066CC; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin: 0; font-weight: 700;">Operations Command</p>
|
||||
<h1 style="margin: 12px 0 16px 0; font-size: 26px; font-weight: 300; color: #1D1D1F; letter-spacing: -0.5px;">Incoming ${payload.type} Signal</h1>
|
||||
<span style="display: inline-block; padding: 6px 16px; background-color: #F5F5F7; border-radius: 20px; font-family: monospace; color: #1D1D1F; font-size: 13px; font-weight: 600; border: 1px solid #E5E5EA;">Ticket: ${ticketId}</span>
|
||||
</div>
|
||||
|
||||
<div style="padding: 32px; color: #1D1D1F;">
|
||||
<div style="background-color: #F5F5F7; padding: 24px; border-radius: 12px; margin-bottom: 32px; border: 1px solid #E5E5EA;">
|
||||
<p style="margin: 0 0 8px 0; font-size: 15px;"><strong>${payload.clientName}</strong> · ${payload.clientCompany}</p>
|
||||
<p style="margin: 0 0 8px 0; font-size: 14px; color: #86868B;">Email: <a href="mailto:${payload.clientEmail}" style="color: #0066CC; text-decoration: none;">${payload.clientEmail}</a></p>
|
||||
<p style="margin: 0; font-size: 14px; color: #86868B;">Phone: ${payload.clientPhone || 'N/A'}</p>
|
||||
</div>
|
||||
|
||||
${payload.message ? `
|
||||
<div style="margin-bottom: 32px;">
|
||||
<h3 style="font-size: 12px; text-transform: uppercase; color: #86868B; letter-spacing: 1px; margin-bottom: 12px;">Client Notes</h3>
|
||||
<div style="padding: 20px; border-left: 4px solid #1D1D1F; background: #FAFAFA; border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.6;">${payload.message}</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${cartItems.length > 0 ? `
|
||||
<div style="margin-bottom: 32px;">
|
||||
<h3 style="font-size: 12px; text-transform: uppercase; color: #86868B; letter-spacing: 1px; margin-bottom: 12px;">Requested Components</h3>
|
||||
<table style="width: 100%; border-collapse: collapse; background: #FAFAFA; border-radius: 8px; overflow: hidden; border: 1px solid #E5E5EA;">
|
||||
<thead>
|
||||
<tr style="background: #F5F5F7;">
|
||||
<th style="padding: 12px; border-bottom: 1px solid #E5E5EA; text-align: left; font-size: 12px; color: #86868B; text-transform: uppercase;">Component</th>
|
||||
<th style="padding: 12px; border-bottom: 1px solid #E5E5EA; text-align: center; font-size: 12px; color: #86868B; text-transform: uppercase;">QTY</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${cartRows}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${files.length > 0 ? `
|
||||
<div style="margin-bottom: 32px;">
|
||||
<h3 style="font-size: 12px; text-transform: uppercase; color: #86868B; letter-spacing: 1px; margin-bottom: 12px;">Diagnostic Media</h3>
|
||||
<div style="background: #FAFAFA; padding: 20px; border-radius: 12px; border: 1px solid #E5E5EA;">${fileLinks}</div>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
<div style="background-color: #FAFAFA; border-top: 1px solid #E5E5EA; padding: 24px; font-size: 12px; color: #86868B; text-align: center;">
|
||||
<p style="margin: 0;">Automated by <strong>FLUX Operations Command</strong></p>
|
||||
<p style="margin: 8px 0 0 0;">Reply to this email to reach the client directly.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// 🔥 ASSET MANAGER API — File Browser & Upload for Applications CMS
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Place this file at: /src/app/api/assets/route.ts (or /app/api/assets/route.ts)
|
||||
//
|
||||
// Endpoints:
|
||||
// GET /api/assets?slug=textile-drying&path=images
|
||||
// → Lists all files and folders inside /public/applications/{slug}/{path}
|
||||
//
|
||||
// POST /api/assets (multipart FormData with: slug, path, file)
|
||||
// → Uploads a file to /public/applications/{slug}/{path}/
|
||||
//
|
||||
// PUT /api/assets (JSON body: { slug, folderName, parentPath })
|
||||
// → Creates a new folder at /public/applications/{slug}/{parentPath}/{folderName}
|
||||
//
|
||||
// DELETE /api/assets (JSON body: { slug, filePath })
|
||||
// → Deletes a file at /public/applications/{slug}/{filePath}
|
||||
//
|
||||
// Security:
|
||||
// - All paths are sanitized and clamped to /public/applications/{slug}/
|
||||
// - No traversal (../) allowed
|
||||
// - Only known media extensions are served
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
// /src/app/api/assets/route.ts — ASSET MANAGER API v3
|
||||
// Supports scope=applications (/public/applications/{slug}/)
|
||||
// scope=cases (/public/cases/{slug}/)
|
||||
// scope=news (/public/news/{slug}/)
|
||||
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
|
||||
const SCOPE_ROOTS: Record<string, string> = {
|
||||
applications: path.join(process.cwd(), "public", "applications"),
|
||||
cases: path.join(process.cwd(), "public", "cases"),
|
||||
news: path.join(process.cwd(), "public", "news"),
|
||||
// 🔥 NUEVO: Scope para el Component Matrix
|
||||
parts: path.join(process.cwd(), "public", "parts"),
|
||||
};
|
||||
|
||||
const MEDIA_TYPES: Record<string, string[]> = {
|
||||
image: [".jpg", ".jpeg", ".png", ".webp", ".gif", ".svg", ".avif"],
|
||||
video: [".mp4", ".webm", ".mov"],
|
||||
model: [".glb", ".gltf", ".usdz"],
|
||||
document: [".pdf"],
|
||||
};
|
||||
|
||||
const ALL_EXTENSIONS = Object.values(MEDIA_TYPES).flat();
|
||||
|
||||
function getFileType(filename: string): string {
|
||||
const ext = path.extname(filename).toLowerCase();
|
||||
for (const [type, exts] of Object.entries(MEDIA_TYPES)) {
|
||||
if (exts.includes(ext)) return type;
|
||||
}
|
||||
return "unknown";
|
||||
}
|
||||
|
||||
function getFileSize(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
function sanitizePath(input: string): string {
|
||||
return input
|
||||
.replace(/\.\./g, "")
|
||||
.replace(/[<>:"|?*]/g, "")
|
||||
.replace(/\/+/g, "/")
|
||||
.replace(/^\/+|\/+$/g, "");
|
||||
}
|
||||
|
||||
function buildSafePath(scope: string, slug: string, subPath?: string): string | null {
|
||||
const root = SCOPE_ROOTS[scope];
|
||||
if (!root || !slug) return null;
|
||||
const appDir = path.join(root, slug);
|
||||
if (!subPath || subPath === "" || subPath === "/") return appDir;
|
||||
const cleaned = sanitizePath(subPath);
|
||||
const fullPath = path.join(appDir, cleaned);
|
||||
if (!path.resolve(fullPath).startsWith(path.resolve(appDir))) return null;
|
||||
return fullPath;
|
||||
}
|
||||
|
||||
function buildBreadcrumbs(subPath: string) {
|
||||
const parts = subPath ? subPath.split("/").filter(Boolean) : [];
|
||||
const crumbs = [{ name: "Root", path: "" }];
|
||||
let acc = "";
|
||||
for (const p of parts) {
|
||||
acc += (acc ? "/" : "") + p;
|
||||
crumbs.push({ name: p, path: acc });
|
||||
}
|
||||
return crumbs;
|
||||
}
|
||||
|
||||
// GET — List files and folders
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const scope = searchParams.get("scope") || "applications";
|
||||
const slug = searchParams.get("slug");
|
||||
const subPath = searchParams.get("path") || "";
|
||||
|
||||
if (!slug) return NextResponse.json({ error: "Missing slug" }, { status: 400 });
|
||||
if (!SCOPE_ROOTS[scope]) return NextResponse.json({ error: `Invalid scope "${scope}"` }, { status: 400 });
|
||||
|
||||
const dirPath = buildSafePath(scope, slug, subPath);
|
||||
if (!dirPath) return NextResponse.json({ error: "Invalid path" }, { status: 400 });
|
||||
|
||||
if (!fs.existsSync(dirPath)) {
|
||||
return NextResponse.json({
|
||||
success: true, scope, slug,
|
||||
currentPath: subPath || "/",
|
||||
items: [],
|
||||
breadcrumbs: buildBreadcrumbs(subPath),
|
||||
});
|
||||
}
|
||||
|
||||
const entries = fs.readdirSync(dirPath, { withFileTypes: true });
|
||||
|
||||
const items = entries
|
||||
.filter(e => !e.name.startsWith(".") && e.name !== "Thumbs.db")
|
||||
.map(entry => {
|
||||
const entryPath = path.join(dirPath, entry.name);
|
||||
const rel = subPath ? `${subPath}/${entry.name}` : entry.name;
|
||||
|
||||
if (entry.isDirectory()) {
|
||||
let childCount = 0;
|
||||
try { childCount = fs.readdirSync(entryPath).filter(f => !f.startsWith(".")).length; } catch {}
|
||||
return { name: entry.name, type: "folder" as const, path: rel, childCount };
|
||||
}
|
||||
|
||||
const stats = fs.statSync(entryPath);
|
||||
return {
|
||||
name: entry.name,
|
||||
type: "file" as const,
|
||||
mediaType: getFileType(entry.name),
|
||||
extension: path.extname(entry.name).toLowerCase(),
|
||||
path: rel,
|
||||
publicUrl: `/${scope}/${slug}/${rel}`,
|
||||
size: getFileSize(stats.size),
|
||||
sizeBytes: stats.size,
|
||||
modifiedAt: stats.mtime.toISOString(),
|
||||
};
|
||||
})
|
||||
.sort((a, b) => {
|
||||
if (a.type === "folder" && b.type !== "folder") return -1;
|
||||
if (a.type !== "folder" && b.type === "folder") return 1;
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
return NextResponse.json({
|
||||
success: true, scope, slug,
|
||||
currentPath: subPath || "/",
|
||||
items,
|
||||
breadcrumbs: buildBreadcrumbs(subPath),
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Asset GET error:", error);
|
||||
return NextResponse.json({ error: "Failed to list directory" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
// POST — Upload a file
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const formData = await request.formData();
|
||||
const scope = (formData.get("scope") as string) || "applications";
|
||||
const slug = formData.get("slug") as string;
|
||||
const subPath = formData.get("path") as string || "";
|
||||
const file = formData.get("file") as File;
|
||||
|
||||
if (!slug || !file) return NextResponse.json({ error: "Missing slug or file" }, { status: 400 });
|
||||
if (!SCOPE_ROOTS[scope]) return NextResponse.json({ error: "Invalid scope" }, { status: 400 });
|
||||
|
||||
const ext = path.extname(file.name).toLowerCase();
|
||||
if (!ALL_EXTENSIONS.includes(ext)) {
|
||||
return NextResponse.json({ error: `Type "${ext}" not allowed. Accepted: ${ALL_EXTENSIONS.join(", ")}` }, { status: 400 });
|
||||
}
|
||||
if (file.size > 50 * 1024 * 1024) {
|
||||
return NextResponse.json({ error: "File exceeds 50MB limit" }, { status: 400 });
|
||||
}
|
||||
|
||||
const dirPath = buildSafePath(scope, slug, subPath);
|
||||
if (!dirPath) return NextResponse.json({ error: "Invalid path" }, { status: 400 });
|
||||
|
||||
fs.mkdirSync(dirPath, { recursive: true });
|
||||
|
||||
const safeName = file.name.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9._-]/g, "");
|
||||
const filePath = path.join(dirPath, safeName);
|
||||
const existed = fs.existsSync(filePath);
|
||||
|
||||
fs.writeFileSync(filePath, Buffer.from(await file.arrayBuffer()));
|
||||
|
||||
const rel = subPath ? `${subPath}/${safeName}` : safeName;
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
file: {
|
||||
name: safeName,
|
||||
publicUrl: `/${scope}/${slug}/${rel}`,
|
||||
path: rel,
|
||||
mediaType: getFileType(safeName),
|
||||
size: getFileSize(file.size),
|
||||
overwritten: existed,
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Asset POST error:", error);
|
||||
return NextResponse.json({ error: "Upload failed" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
// PUT — Create a new folder
|
||||
export async function PUT(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { scope = "applications", slug, folderName, parentPath = "" } = body;
|
||||
|
||||
if (!slug || !folderName) return NextResponse.json({ error: "Missing slug or folderName" }, { status: 400 });
|
||||
if (!SCOPE_ROOTS[scope]) return NextResponse.json({ error: "Invalid scope" }, { status: 400 });
|
||||
|
||||
const safe = folderName.toLowerCase().trim().replace(/\s+/g, "-").replace(/[^a-z0-9_-]/g, "");
|
||||
if (!safe) return NextResponse.json({ error: "Invalid folder name" }, { status: 400 });
|
||||
|
||||
const targetPath = buildSafePath(scope, slug, parentPath ? `${parentPath}/${safe}` : safe);
|
||||
if (!targetPath) return NextResponse.json({ error: "Invalid path" }, { status: 400 });
|
||||
|
||||
if (fs.existsSync(targetPath)) return NextResponse.json({ error: "Folder already exists" }, { status: 409 });
|
||||
|
||||
fs.mkdirSync(targetPath, { recursive: true });
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
folder: { name: safe, path: parentPath ? `${parentPath}/${safe}` : safe }
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Asset PUT error:", error);
|
||||
return NextResponse.json({ error: "Failed to create folder" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
// DELETE — Remove a file
|
||||
export async function DELETE(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { scope = "applications", slug, filePath } = body;
|
||||
|
||||
if (!slug || !filePath) return NextResponse.json({ error: "Missing params" }, { status: 400 });
|
||||
if (!SCOPE_ROOTS[scope]) return NextResponse.json({ error: "Invalid scope" }, { status: 400 });
|
||||
|
||||
const targetPath = buildSafePath(scope, slug, filePath);
|
||||
if (!targetPath) return NextResponse.json({ error: "Invalid path" }, { status: 400 });
|
||||
|
||||
if (!fs.existsSync(targetPath)) return NextResponse.json({ error: "File not found" }, { status: 404 });
|
||||
if (fs.statSync(targetPath).isDirectory()) return NextResponse.json({ error: "Cannot delete folders via API" }, { status: 400 });
|
||||
|
||||
fs.unlinkSync(targetPath);
|
||||
|
||||
return NextResponse.json({ success: true, deleted: filePath });
|
||||
} catch (error) {
|
||||
console.error("Asset DELETE error:", error);
|
||||
return NextResponse.json({ error: "Delete failed" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,588 @@
|
||||
import { openai } from '@ai-sdk/openai';
|
||||
import { streamText, UIMessage, convertToModelMessages, tool } from 'ai';
|
||||
import { z } from 'zod';
|
||||
import { prisma } from '@/lib/prisma';
|
||||
|
||||
export const maxDuration = 30;
|
||||
|
||||
// ─── PHYSICS CONSTANTS (NOT from DB — these are engineering benchmarks) ──────
|
||||
// These stay hardcoded because they are physical/scientific constants,
|
||||
// not business data that changes with CMS updates.
|
||||
|
||||
const ENERGY_DATA: Record<string, {
|
||||
traditionalKwhPerKg: number;
|
||||
rfKwhPerKg: number;
|
||||
traditionalMethod: string;
|
||||
co2FactorKgPerKwh: number;
|
||||
typicalPaybackMonths: number;
|
||||
}> = {
|
||||
textile: { traditionalKwhPerKg: 1.8, rfKwhPerKg: 0.85, traditionalMethod: 'Hot Air Stenter', co2FactorKgPerKwh: 0.4, typicalPaybackMonths: 18 },
|
||||
food: { traditionalKwhPerKg: 2.2, rfKwhPerKg: 0.95, traditionalMethod: 'Convection Oven', co2FactorKgPerKwh: 0.4, typicalPaybackMonths: 14 },
|
||||
rubber: { traditionalKwhPerKg: 3.0, rfKwhPerKg: 1.2, traditionalMethod: 'Steam Autoclave', co2FactorKgPerKwh: 0.4, typicalPaybackMonths: 12 },
|
||||
pharma: { traditionalKwhPerKg: 2.5, rfKwhPerKg: 1.0, traditionalMethod: 'Vacuum Tray Dryer', co2FactorKgPerKwh: 0.4, typicalPaybackMonths: 16 },
|
||||
wood: { traditionalKwhPerKg: 2.0, rfKwhPerKg: 0.9, traditionalMethod: 'Kiln Drying', co2FactorKgPerKwh: 0.4, typicalPaybackMonths: 20 },
|
||||
default: { traditionalKwhPerKg: 2.0, rfKwhPerKg: 0.9, traditionalMethod: 'Conventional Heating', co2FactorKgPerKwh: 0.4, typicalPaybackMonths: 18 },
|
||||
};
|
||||
|
||||
const COMPARISON_DATA: Record<string, { rf: number; traditional: number; unit: string }> = {
|
||||
efficiency: { rf: 95, traditional: 45, unit: '%' },
|
||||
uniformity: { rf: 98, traditional: 70, unit: '%' },
|
||||
speed: { rf: 85, traditional: 40, unit: 'score' },
|
||||
maintenance: { rf: 90, traditional: 55, unit: 'score' },
|
||||
lifespan: { rf: 20, traditional: 8, unit: 'years' },
|
||||
footprint: { rf: 30, traditional: 100, unit: 'relative' },
|
||||
};
|
||||
|
||||
// ─── DYNAMIC SYSTEM PROMPT BUILDER ──────────────────────────────
|
||||
// Injects real-time database context so the AI knows what exists
|
||||
|
||||
async function buildSystemPrompt(): Promise<string> {
|
||||
// Query real data from Prisma
|
||||
const [activeApps, installationCount, eventCount, partsCount] = await Promise.all([
|
||||
prisma.application.findMany({
|
||||
where: { isActive: true },
|
||||
select: { slug: true, title: true, shortDescription: true, category: true },
|
||||
orderBy: { title: 'asc' },
|
||||
}),
|
||||
prisma.globalNode.count({ where: { nodeType: 'installation', isActive: true } }),
|
||||
prisma.globalNode.count({ where: { nodeType: 'event', isActive: true } }),
|
||||
prisma.sparePart.count({ where: { isActive: true } }),
|
||||
]);
|
||||
|
||||
const appList = activeApps.map((a: any) => ` - ${a.title} (slug: "${a.slug}", category: ${a.category})`).join('\n');
|
||||
|
||||
return `You are "FluxAI", the intelligent engineering advisor and sales specialist for FLUX Srl — a world leader in solid-state Radio Frequency (RF), Microwave, and Infrared industrial equipment. Founded by Patrizio Grando with 40+ years of legacy. Headquarters: Romano d'Ezzelino, Vicenza, Italy.
|
||||
|
||||
PERSONALITY:
|
||||
- Senior RF engineer who also understands business ROI.
|
||||
- Concise, authoritative, no filler — every sentence delivers value.
|
||||
- Apple-level design thinking meets German engineering precision.
|
||||
- NO emojis. NO exclamation marks. Professional warmth only.
|
||||
|
||||
═══════════════════════════════════════════
|
||||
LIVE DATABASE STATE (auto-updated from CMS):
|
||||
- ${installationCount} active installations worldwide
|
||||
- ${eventCount} upcoming/recent events
|
||||
- ${partsCount} spare parts in catalog
|
||||
- Applications available:
|
||||
${appList}
|
||||
═══════════════════════════════════════════
|
||||
|
||||
CORE KNOWLEDGE:
|
||||
- FLUX solid-state RF operates at 27.12 MHz with 95%+ power transfer efficiency
|
||||
- Volumetric heating (not surface): energy goes directly into the product mass
|
||||
- Applications: Drying, Vulcanization, Curing, Baking, Defrosting, Sanitization
|
||||
- Industries: Textile, Food Processing, Rubber/Latex, Pharma, Wood, Ceramics
|
||||
- Key advantage vs vacuum tubes: no consumable parts, 20+ year lifespan, digital control
|
||||
- Key advantage vs microwave (2450 MHz): deeper penetration, more uniform field, better for bulk materials
|
||||
|
||||
MULTI-STEP AUTONOMY (CRITICAL):
|
||||
You are an autonomous agent. You MUST chain tools automatically without waiting for the user.
|
||||
|
||||
Example of a perfect autonomous flow:
|
||||
1. User: "Will RF save me money in textile drying?"
|
||||
2. You call 'search_installations' to find real textile drying installations.
|
||||
3. You read the results and see 2 installations with -47% and -53% savings.
|
||||
4. You call 'energy_savings_calculator' with the user's context.
|
||||
5. You call 'show_case_study' with the most relevant installation's nodeId.
|
||||
6. You output your final text referencing real data, the case study card, and gently offer a consultation.
|
||||
|
||||
═══════════════════════════════════════════
|
||||
SALES METHODOLOGY — SPIN FRAMEWORK:
|
||||
═══════════════════════════════════════════
|
||||
Before deploying tools, qualify the prospect through natural conversation:
|
||||
|
||||
S (Situación): What's their current process? What method? What volume?
|
||||
P (Problema): What's not working? Energy costs? Quality issues? Speed?
|
||||
I (Implicación): What does the problem cost them? Rejected batches? Downtime?
|
||||
N (Necesidad): Confirm the need before recommending.
|
||||
|
||||
RULES:
|
||||
- If the user mentions an industry WITHOUT specifics → ask 1-2 qualifying questions BEFORE firing tools.
|
||||
Example: "Estoy en textiles" → "What specific process are you evaluating — post-dye drying, finishing, moisture leveling? And what method do you currently use?"
|
||||
- If the user provides DETAILED context (industry + process + volume OR problem) → proceed directly to tools.
|
||||
- Never fire more than 2 tools in a single autonomous sequence without including meaningful analysis text.
|
||||
- EXCEPTION: If the user explicitly asks for something specific ("show me case studies", "calculate savings for 500 kg/h"), deliver it immediately.
|
||||
|
||||
IDEAL CONVERSION FLOW:
|
||||
Qualify → Educate (explainer/comparison) → Quantify (calculator) → Prove (case study) → Recommend (equipment specs) → Convert (consultation)
|
||||
|
||||
═══════════════════════════════════════════
|
||||
TOOL USAGE RULES:
|
||||
═══════════════════════════════════════════
|
||||
1. SEARCH INSTALLATIONS: Use 'search_installations' to find real installations from our database. This is a DATA tool — you receive the results and reason about them before responding.
|
||||
2. SHOW CASE STUDY: Use 'show_case_study' to display a rich case study card for a specific installation. Requires a nodeId (get it from search_installations first) or an application slug for auto-match.
|
||||
3. SAVINGS/ROI: Use 'energy_savings_calculator' when discussing costs, energy, ROI. If volume is missing, assume 500 kg/h and 16h/day.
|
||||
4. NAVIGATION: Use 'navigate_to_section' to move the user around the site.
|
||||
5. COMPARISONS: Use 'process_comparison_table' for RF vs conventional tech.
|
||||
6. EXPLAIN TECH: Use 'rf_technology_explainer' for physics/mechanism questions.
|
||||
7. APPLICATION KNOWLEDGE: Use 'get_application_knowledge' to retrieve deep technical theory, advantages, and datasheets from our knowledge base.
|
||||
8. EQUIPMENT SPECS: Use 'show_equipment_specs' to display real machine specifications from an actual installation.
|
||||
9. CONSULTATION (PRIMARY GOAL): Use 'schedule_consultation' when the user shows buying intent.
|
||||
|
||||
PROACTIVE NEXT STEPS:
|
||||
After showing results, gently suggest the logical next action:
|
||||
savings → case study ("We have real installations proving these numbers...")
|
||||
case study → equipment specs ("Want to see the technical specs of the system used?")
|
||||
equipment → consultation ("Shall I arrange a conversation with our engineering team?")
|
||||
|
||||
LANGUAGE: Respond in the exact same language the user writes in.`;
|
||||
}
|
||||
|
||||
// ─── HELPER: Parse JSON safely ──────────────────────────────────
|
||||
|
||||
function safeParseJson<T>(json: string | null | undefined, fallback: T): T {
|
||||
if (!json) return fallback;
|
||||
try { return JSON.parse(json); } catch { return fallback; }
|
||||
}
|
||||
|
||||
// ─── HELPER: Extract industry from application slug ─────────────
|
||||
|
||||
function industryFromSlug(slug: string): string {
|
||||
if (slug.includes('textile')) return 'textile';
|
||||
if (slug.includes('food') || slug.includes('defrost') || slug.includes('bak') || slug.includes('pasteuriz')) return 'food';
|
||||
if (slug.includes('rubber') || slug.includes('vulcaniz') || slug.includes('foam')) return 'rubber';
|
||||
if (slug.includes('pharma') || slug.includes('cannabis') || slug.includes('lab')) return 'pharma';
|
||||
if (slug.includes('wood')) return 'wood';
|
||||
return 'other';
|
||||
}
|
||||
|
||||
// ─── ROUTE HANDLER ──────────────────────────────────────────────
|
||||
|
||||
export async function POST(req: Request) {
|
||||
const { messages, context }: {
|
||||
messages: UIMessage[];
|
||||
context?: { section?: string; activeTab?: string };
|
||||
} = await req.json();
|
||||
|
||||
const contextNote = context?.section
|
||||
? `\n\n[CONTEXT: User is currently viewing the "${context.section}" section${context.activeTab ? `, tab: "${context.activeTab}"` : ''}.`
|
||||
: '';
|
||||
|
||||
// Build system prompt with live database context
|
||||
const systemPrompt = await buildSystemPrompt();
|
||||
|
||||
const coreMessages = await convertToModelMessages(messages);
|
||||
|
||||
const result = streamText({
|
||||
model: openai('gpt-4o'),
|
||||
system: systemPrompt + contextNote,
|
||||
messages: coreMessages,
|
||||
// maxSteps has been temporarily removed to ensure compatibility with the installed AI SDK version
|
||||
tools: {
|
||||
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
// DATA TOOLS (have execute, return data for AI to reason about)
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
|
||||
// ── TOOL 1: Search Installations (DATA — queries Prisma) ──
|
||||
search_installations: tool({
|
||||
description: `Search the FLUX global installation database for real case studies and projects. Returns summaries for you to analyze and reference in your response. Use when you need to find relevant installations to back up your claims, or when the user asks about references, case studies, or proven results. You can then call 'show_case_study' with a specific nodeId to display the full card to the user.`,
|
||||
inputSchema: z.object({
|
||||
application: z.string().optional()
|
||||
.describe('Application slug to filter by, e.g. "textile-drying", "food-defrosting". Leave empty for all.'),
|
||||
keyword: z.string().optional()
|
||||
.describe('Keyword to search in title or location, e.g. "Japan", "latex"'),
|
||||
limit: z.number().default(5)
|
||||
.describe('Max results to return (default 5)'),
|
||||
}),
|
||||
execute: async ({ application, keyword, limit }) => {
|
||||
const where: any = {
|
||||
nodeType: 'installation',
|
||||
isActive: true,
|
||||
};
|
||||
if (application) where.application = application;
|
||||
|
||||
let nodes = await prisma.globalNode.findMany({
|
||||
where,
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
location: true,
|
||||
application: true,
|
||||
stats: true,
|
||||
energySavings: true,
|
||||
projectOverview: true,
|
||||
specificDatasheetJson: true,
|
||||
},
|
||||
orderBy: { createdAt: 'desc' },
|
||||
take: limit,
|
||||
});
|
||||
|
||||
// Optional keyword filter (Prisma SQLite doesn't support full-text, so manual)
|
||||
if (keyword) {
|
||||
const kw = keyword.toLowerCase();
|
||||
nodes = nodes.filter((n: any) =>
|
||||
n.title.toLowerCase().includes(kw) ||
|
||||
n.location.toLowerCase().includes(kw) ||
|
||||
(n.projectOverview?.toLowerCase().includes(kw) ?? false)
|
||||
);
|
||||
}
|
||||
|
||||
if (nodes.length === 0) {
|
||||
return {
|
||||
found: 0,
|
||||
message: `No installations found${application ? ` for application "${application}"` : ''}${keyword ? ` matching "${keyword}"` : ''}. Try broadening your search or check available applications.`,
|
||||
installations: [],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
found: nodes.length,
|
||||
installations: nodes.map((n: any) => ({
|
||||
nodeId: n.id,
|
||||
title: n.title,
|
||||
location: n.location,
|
||||
application: n.application,
|
||||
stats: n.stats,
|
||||
energySavings: n.energySavings || 'Data pending',
|
||||
hasProjectOverview: !!n.projectOverview,
|
||||
hasDatasheet: n.specificDatasheetJson !== '[]' && !!n.specificDatasheetJson,
|
||||
// Include a brief excerpt for AI reasoning (first 200 chars)
|
||||
overviewExcerpt: n.projectOverview?.slice(0, 200) || null,
|
||||
})),
|
||||
};
|
||||
},
|
||||
}),
|
||||
|
||||
// ── TOOL 2: Get Application Knowledge (DATA — queries Prisma) ──
|
||||
get_application_knowledge: tool({
|
||||
description: `Retrieve deep technical knowledge about a FLUX application from our knowledge base. Returns the scientific theory (heroDescription), technical sections, competitive advantages, and general datasheet. Use when you need to explain WHY RF is suitable for a specific application, or when the user asks technical questions about a process.`,
|
||||
inputSchema: z.object({
|
||||
slug: z.string()
|
||||
.describe('Application slug, e.g. "textile-drying", "food-defrosting", "rubber-vulcanization"'),
|
||||
}),
|
||||
execute: async ({ slug }) => {
|
||||
const app = await prisma.application.findUnique({
|
||||
where: { slug },
|
||||
select: {
|
||||
title: true,
|
||||
subtitle: true,
|
||||
category: true,
|
||||
shortDescription: true,
|
||||
heroDescription: true,
|
||||
sectionsJson: true,
|
||||
advantagesJson: true,
|
||||
datasheetJson: true,
|
||||
dashboardMetricsJson: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (!app) {
|
||||
return { found: false, message: `Application "${slug}" not found. Check available applications in your database context.` };
|
||||
}
|
||||
|
||||
return {
|
||||
found: true,
|
||||
title: app.title,
|
||||
subtitle: app.subtitle,
|
||||
category: app.category,
|
||||
shortDescription: app.shortDescription,
|
||||
// Truncate heroDescription for AI context (keep first 1500 chars — enough for reasoning)
|
||||
theoryExcerpt: app.heroDescription.slice(0, 1500),
|
||||
sections: safeParseJson(app.sectionsJson, []),
|
||||
advantages: safeParseJson(app.advantagesJson, []),
|
||||
datasheet: safeParseJson(app.datasheetJson, []),
|
||||
metrics: safeParseJson(app.dashboardMetricsJson, []),
|
||||
};
|
||||
},
|
||||
}),
|
||||
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
// UI + DATA TOOLS (have execute, return data for component rendering)
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
|
||||
// ── TOOL 3: Show Case Study (UI — fetches full GlobalNode for card) ──
|
||||
show_case_study: tool({
|
||||
description: `Display a rich, interactive case study card for a specific FLUX installation. Shows cover image, metrics, project overview, gallery, and equipment datasheet. Use AFTER calling 'search_installations' to get the nodeId, or provide an application slug to auto-select the best match. The card renders inline in the chat with CTAs to view the full case study modal and locate on the 3D globe.`,
|
||||
inputSchema: z.object({
|
||||
nodeId: z.string().optional()
|
||||
.describe('Specific GlobalNode ID to display. Preferred — get this from search_installations results.'),
|
||||
application: z.string().optional()
|
||||
.describe('Fallback: application slug to auto-pick the best installation if nodeId is not available.'),
|
||||
relevanceNote: z.string()
|
||||
.describe('1-2 sentence AI explanation of WHY this case is relevant to the current conversation. Reference the user\'s industry, process, or concerns.'),
|
||||
}),
|
||||
execute: async ({ nodeId, application, relevanceNote }) => {
|
||||
let node;
|
||||
|
||||
if (nodeId) {
|
||||
node = await prisma.globalNode.findUnique({ where: { id: nodeId } });
|
||||
}
|
||||
|
||||
if (!node && application) {
|
||||
node = await prisma.globalNode.findFirst({
|
||||
where: { application, nodeType: 'installation', isActive: true, projectOverview: { not: null } },
|
||||
orderBy: { createdAt: 'desc' },
|
||||
});
|
||||
}
|
||||
|
||||
if (!node) {
|
||||
return { found: false, message: 'No matching installation found.' };
|
||||
}
|
||||
|
||||
return {
|
||||
found: true,
|
||||
id: node.id,
|
||||
title: node.title,
|
||||
location: node.location,
|
||||
application: node.application,
|
||||
industry: industryFromSlug(node.application),
|
||||
stats: node.stats,
|
||||
energySavings: node.energySavings,
|
||||
projectOverview: node.projectOverview,
|
||||
mediaFileName: node.mediaFileName,
|
||||
gallery: safeParseJson(node.galleryJson, []),
|
||||
datasheet: safeParseJson(node.specificDatasheetJson, []),
|
||||
videos: safeParseJson(node.videosJson, []),
|
||||
relevanceNote,
|
||||
};
|
||||
},
|
||||
}),
|
||||
|
||||
// ── TOOL 4: Show Equipment Specs (UI — real machine datasheet) ──
|
||||
show_equipment_specs: tool({
|
||||
description: `Display a detailed equipment specification card based on a REAL installed FLUX machine. Shows the actual datasheet (specificDatasheetJson) from a proven installation, along with AI-generated sizing guidance. Use when the user asks about equipment, models, specs, sizing, "which machine", or wants to know what FLUX system fits their needs. The card shows real specs from a reference installation — more credible than generic catalog data.`,
|
||||
inputSchema: z.object({
|
||||
nodeId: z.string().optional()
|
||||
.describe('Specific GlobalNode ID of the reference installation. Get from search_installations.'),
|
||||
application: z.string().optional()
|
||||
.describe('Fallback: application slug to auto-pick an installation with datasheet data.'),
|
||||
whyThisModel: z.string()
|
||||
.describe('2-3 sentence AI explanation of why this equipment configuration fits the user\'s needs.'),
|
||||
sizingNote: z.string()
|
||||
.describe('Specific sizing guidance for the user. Reference their production volume if known.'),
|
||||
alternativeNote: z.string().nullable()
|
||||
.describe('Note about scaling options or alternatives. Null if not applicable.'),
|
||||
}),
|
||||
execute: async ({ nodeId, application, whyThisModel, sizingNote, alternativeNote }) => {
|
||||
let node;
|
||||
|
||||
if (nodeId) {
|
||||
node = await prisma.globalNode.findUnique({ where: { id: nodeId } });
|
||||
}
|
||||
|
||||
if (!node && application) {
|
||||
// Find an installation WITH datasheet data
|
||||
node = await prisma.globalNode.findFirst({
|
||||
where: {
|
||||
application,
|
||||
nodeType: 'installation',
|
||||
isActive: true,
|
||||
specificDatasheetJson: { not: '[]' },
|
||||
},
|
||||
orderBy: { createdAt: 'desc' },
|
||||
});
|
||||
}
|
||||
|
||||
if (!node) {
|
||||
return { found: false, message: 'No installation with equipment datasheet found for this application.' };
|
||||
}
|
||||
|
||||
const datasheet = safeParseJson<{ label: string; value: string }[]>(node.specificDatasheetJson, []);
|
||||
|
||||
return {
|
||||
found: true,
|
||||
id: node.id,
|
||||
title: node.title,
|
||||
location: node.location,
|
||||
application: node.application,
|
||||
industry: industryFromSlug(node.application),
|
||||
stats: node.stats,
|
||||
mediaFileName: node.mediaFileName,
|
||||
model3DPath: node.model3DPath,
|
||||
dimensions: safeParseJson(node.model3DDimsJson, null),
|
||||
datasheet,
|
||||
whyThisModel,
|
||||
sizingNote,
|
||||
alternativeNote,
|
||||
};
|
||||
},
|
||||
}),
|
||||
|
||||
// ── TOOL 5: Energy Savings Calculator (standalone — physics constants) ──
|
||||
energy_savings_calculator: tool({
|
||||
description: `Calculate and display an interactive energy savings comparison between FLUX solid-state RF technology and traditional industrial heating/drying methods. Use when the user asks about savings, ROI, energy costs, or efficiency comparisons. If they haven't specified volume, use defaults and state your assumptions.`,
|
||||
inputSchema: z.object({
|
||||
industry: z.enum(['textile', 'food', 'rubber', 'pharma', 'wood', 'other']),
|
||||
process: z.string(),
|
||||
productionVolumeKgPerHour: z.number().default(500),
|
||||
operatingHoursPerDay: z.number().default(16),
|
||||
currentMethod: z.string().optional(),
|
||||
}),
|
||||
execute: async ({ industry, process, productionVolumeKgPerHour, operatingHoursPerDay, currentMethod }) => {
|
||||
const data = ENERGY_DATA[industry] || ENERGY_DATA.default;
|
||||
const annualKg = productionVolumeKgPerHour * operatingHoursPerDay * 300;
|
||||
const annualKwhTraditional = annualKg * data.traditionalKwhPerKg;
|
||||
const annualKwhRF = annualKg * data.rfKwhPerKg;
|
||||
const annualSavingsKwh = annualKwhTraditional - annualKwhRF;
|
||||
const savingsPercent = Math.round((annualSavingsKwh / annualKwhTraditional) * 100);
|
||||
|
||||
return {
|
||||
industry, process, productionVolumeKgPerHour, operatingHoursPerDay,
|
||||
traditionalMethod: currentMethod || data.traditionalMethod,
|
||||
traditionalKwhPerKg: data.traditionalKwhPerKg,
|
||||
rfKwhPerKg: data.rfKwhPerKg,
|
||||
savingsPercent,
|
||||
annualKwhTraditional: Math.round(annualKwhTraditional),
|
||||
annualKwhRF: Math.round(annualKwhRF),
|
||||
annualSavingsKwh: Math.round(annualSavingsKwh),
|
||||
annualCO2SavedTonnes: Math.round(annualSavingsKwh * data.co2FactorKgPerKwh / 1000),
|
||||
annualCostSavingsEur: Math.round(annualSavingsKwh * 0.15),
|
||||
paybackMonths: data.typicalPaybackMonths,
|
||||
rfEfficiency: 95,
|
||||
};
|
||||
},
|
||||
}),
|
||||
|
||||
// ── TOOL 6: Navigate to Section (client-side — NO execute) ──
|
||||
navigate_to_section: tool({
|
||||
description: `Maps the user to a specific section of the FLUX website. Use when the user says "show me", "take me to", "where is", or asks about a specific page section. Available sections: "hero", "applications-dashboard", "applications-deep", "global" (globe), "timeline", "heritage", "news", "parts-catalog", "contact".`,
|
||||
inputSchema: z.object({
|
||||
section: z.string().describe('Target section ID'),
|
||||
subAction: z.enum(['none', 'activate-tab', 'highlight-node']).default('none'),
|
||||
tabId: z.string().optional().describe('Application slug to activate'),
|
||||
nodeId: z.string().optional().describe('Globe node ID to highlight'),
|
||||
}),
|
||||
}),
|
||||
|
||||
// ── TOOL 7: Process Comparison Table (standalone — physics data) ──
|
||||
process_comparison_table: tool({
|
||||
description: `Display a detailed visual comparison table between FLUX solid-state RF technology and a traditional/competing industrial heating method. Use when the user explicitly asks to compare technologies.`,
|
||||
inputSchema: z.object({
|
||||
competitorMethod: z.enum(['Hot Air', 'Steam', 'Microwave (2450 MHz)', 'Infrared', 'Vacuum Tubes', 'Convection Oven', 'Kiln Drying']),
|
||||
applicationContext: z.string(),
|
||||
}),
|
||||
execute: async ({ competitorMethod, applicationContext }) => {
|
||||
const compContext = `${applicationContext} application`;
|
||||
const categories = [
|
||||
{ label: 'Power Transfer Efficiency', rf: COMPARISON_DATA.efficiency.rf, competitor: COMPARISON_DATA.efficiency.traditional, unit: '%', note: 'FLUX solid-state delivers 95%+ of generated power directly into the product.' },
|
||||
{ label: 'Heating Uniformity', rf: COMPARISON_DATA.uniformity.rf, competitor: COMPARISON_DATA.uniformity.traditional, unit: '%', note: 'Volumetric RF heats the entire mass simultaneously — no hot spots or cold cores.' },
|
||||
{ label: 'Processing Speed', rf: COMPARISON_DATA.speed.rf, competitor: COMPARISON_DATA.speed.traditional, unit: ' (score)', note: 'RF reduces processing time by 50-80% depending on material and moisture content.' },
|
||||
{ label: 'Maintenance Cost', rf: COMPARISON_DATA.maintenance.rf, competitor: COMPARISON_DATA.maintenance.traditional, unit: ' (score)', note: 'Solid-state = zero consumable parts. No magnetrons, no vacuum tubes to replace.' },
|
||||
{ label: 'Equipment Lifespan', rf: COMPARISON_DATA.lifespan.rf, competitor: COMPARISON_DATA.lifespan.traditional, unit: ' years', note: 'FLUX solid-state generators are rated for 20+ years of continuous industrial operation.' },
|
||||
{ label: 'Carbon Footprint', rf: COMPARISON_DATA.footprint.rf, competitor: COMPARISON_DATA.footprint.traditional, unit: ' (relative)', note: 'Less energy consumed = proportionally lower CO2 emissions.' },
|
||||
];
|
||||
return { fluxMethod: 'Solid-State RF (27.12 MHz)', competitorMethod, context: compContext, categories };
|
||||
},
|
||||
}),
|
||||
|
||||
// ── TOOL 8: RF Technology Explainer (standalone — physics) ──
|
||||
rf_technology_explainer: tool({
|
||||
description: `Display an interactive animated visualization explaining how Radio Frequency (RF) heating works at 27.12 MHz. Use for physics/mechanism questions.`,
|
||||
inputSchema: z.object({
|
||||
material: z.enum(['textile', 'food', 'rubber', 'pharma', 'wood', 'other']),
|
||||
comparisonMethod: z.string().default('Hot Air'),
|
||||
}),
|
||||
execute: async ({ material, comparisonMethod }) => {
|
||||
const materialData: Record<string, {
|
||||
label: string; waterContent: number; dielectric: number;
|
||||
penetration: string; timeReduction: number; advantages: string[]; physics: string;
|
||||
}> = {
|
||||
textile: {
|
||||
label: 'Textile & Fabrics', waterContent: 60, dielectric: 80, penetration: 'Full web width',
|
||||
timeReduction: 55,
|
||||
advantages: [
|
||||
'Uniform drying across full fabric width — eliminates edge-to-center moisture variation',
|
||||
'No thermal damage to fibers — RF energy targets water, not the material',
|
||||
'Replaces 40+ meter stenters with compact 10-12m RF modules',
|
||||
'Self-regulating: wetter areas absorb more energy automatically',
|
||||
],
|
||||
physics: 'At 27.12 MHz, water molecules in the textile rotate 27 million times per second. This molecular friction generates heat precisely where moisture exists, leaving dry fibers unaffected.',
|
||||
},
|
||||
food: {
|
||||
label: 'Food Products', waterContent: 70, dielectric: 75, penetration: 'Full depth',
|
||||
timeReduction: 60,
|
||||
advantages: [
|
||||
'Defrost from -18°C to -2°C in minutes with zero temperature differential',
|
||||
'No surface cooking or bacterial growth window',
|
||||
'Uniform pasteurization through the entire product mass',
|
||||
'Preserves texture, color, and nutritional value',
|
||||
],
|
||||
physics: 'RF dielectric heating at 27.12 MHz penetrates frozen food blocks completely. Unlike microwave (2450 MHz), the longer wavelength provides far more uniform energy distribution — no hot spots.',
|
||||
},
|
||||
rubber: {
|
||||
label: 'Rubber & Latex', waterContent: 40, dielectric: 50, penetration: 'Full thickness (up to 25cm)',
|
||||
timeReduction: 65,
|
||||
advantages: [
|
||||
'Simultaneous vulcanization through entire foam thickness',
|
||||
'Eliminates thermal gradient: no over-cured surface / under-cured core',
|
||||
'Cycle times reduced from 45+ minutes to 10-15 minutes',
|
||||
'Uniform crosslink density = consistent product quality',
|
||||
],
|
||||
physics: 'Latex foam contains water and polar molecules that respond to the 27.12 MHz field. The electromagnetic energy converts to heat uniformly throughout the block, achieving the vulcanization temperature simultaneously at every point.',
|
||||
},
|
||||
pharma: {
|
||||
label: 'Pharma & Botanicals', waterContent: 55, dielectric: 65, penetration: 'Full depth',
|
||||
timeReduction: 50,
|
||||
advantages: [
|
||||
'Precise temperature control protects active pharmaceutical ingredients',
|
||||
'Cannabis decontamination without terpene degradation',
|
||||
'Uniform sanitization of herbs and spices',
|
||||
'Gentle drying preserves molecular integrity',
|
||||
],
|
||||
physics: 'RF dielectric heating at 27.12 MHz provides gentle, volumetric energy delivery that can pasteurize or sanitize without exceeding critical temperatures that would degrade sensitive compounds.',
|
||||
},
|
||||
wood: {
|
||||
label: 'Wood & Composites', waterContent: 30, dielectric: 20, penetration: 'Full depth',
|
||||
timeReduction: 65,
|
||||
advantages: [
|
||||
'No case-hardening — moisture escapes uniformly',
|
||||
'Eliminates internal stresses and checking/cracking',
|
||||
'Phytosanitary treatment (ISPM-15) in minutes, not days',
|
||||
'Adhesive curing in laminated products',
|
||||
],
|
||||
physics: 'Wood is a poor thermal conductor. Conventional kiln drying takes days because heat must slowly penetrate inward. RF bypasses this limitation — the electromagnetic field heats all water molecules simultaneously regardless of depth.',
|
||||
},
|
||||
other: {
|
||||
label: 'Industrial Materials', waterContent: 25, dielectric: 40, penetration: 'Full depth',
|
||||
timeReduction: 50,
|
||||
advantages: [
|
||||
'Volumetric heating eliminates processing bottlenecks',
|
||||
'Digital control for precise, repeatable results',
|
||||
'No combustion byproducts — clean process',
|
||||
'Compact footprint vs conventional thermal equipment',
|
||||
],
|
||||
physics: 'At 27.12 MHz (ISM band), the RF electromagnetic field induces rapid dipole rotation and ionic conduction within the material, converting electrical energy to thermal energy with 95%+ efficiency directly inside the product.',
|
||||
},
|
||||
};
|
||||
|
||||
const d = materialData[material] || materialData.other;
|
||||
return {
|
||||
material, materialLabel: d.label, comparisonMethod, rfFrequency: '27.12 MHz',
|
||||
penetrationDepth: d.penetration, heatingMechanism: 'Dielectric loss (dipole rotation + ionic conduction)',
|
||||
waterContentPercent: d.waterContent, dielectricConstant: d.dielectric,
|
||||
processingTimeReduction: d.timeReduction, keyAdvantages: d.advantages, physicsNote: d.physics,
|
||||
};
|
||||
},
|
||||
}),
|
||||
|
||||
// ── TOOL 9: Schedule Consultation (server-side, pre-fills form) ──
|
||||
schedule_consultation: tool({
|
||||
description: `Display an intelligent consultation booking form pre-filled with context from the current conversation. This is the PRIMARY conversion tool — the goal of every FLUX conversation. Use when the user shows buying intent: schedule, contact, quote, proposal, "talk to someone", "I'm interested".`,
|
||||
inputSchema: z.object({
|
||||
industry: z.enum(['textile', 'food', 'rubber', 'pharma', 'wood', 'other']),
|
||||
process: z.string(),
|
||||
conversationInsights: z.array(z.string())
|
||||
.describe('3-5 key points from the conversation with numbers, comparisons, technical details.'),
|
||||
estimatedSavingsPercent: z.number().nullable(),
|
||||
productionVolume: z.string().nullable(),
|
||||
suggestedTopics: z.array(z.string())
|
||||
.describe('2-4 topics the FLUX engineer should prepare for.'),
|
||||
}),
|
||||
execute: async ({ industry, process, conversationInsights, estimatedSavingsPercent, productionVolume, suggestedTopics }) => {
|
||||
const industryLabels: Record<string, string> = {
|
||||
textile: 'Textile', food: 'Food Processing', rubber: 'Rubber & Latex',
|
||||
pharma: 'Pharma & Cosmetics', wood: 'Wood Treatment', other: 'Industrial',
|
||||
};
|
||||
return {
|
||||
industry, industryLabel: industryLabels[industry] || industry,
|
||||
process, conversationInsights, estimatedSavingsPercent, productionVolume, suggestedTopics,
|
||||
};
|
||||
},
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
return result.toUIMessageStreamResponse();
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
// /src/app/api/consultation/route.ts
|
||||
// Public API endpoint for ConsultationScheduler → OperationsSignal
|
||||
// Uses SMTP mailer (no Resend dependency)
|
||||
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { sendEmail } from "@/lib/mailer";
|
||||
|
||||
// Helper: sequential ticket ID
|
||||
async function generateConsultationTicketId(): Promise<string> {
|
||||
const year = new Date().getFullYear();
|
||||
const count = await prisma.operationsSignal.count({
|
||||
where: { ticketId: { startsWith: `CON-${year}` } },
|
||||
});
|
||||
return `CON-${year}-${String(count + 1).padStart(4, "0")}`;
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { contact, aiContext, meta } = body;
|
||||
|
||||
if (!contact?.name || !contact?.email || !contact?.company) {
|
||||
return NextResponse.json({ error: "Missing required contact fields" }, { status: 400 });
|
||||
}
|
||||
|
||||
const ticketId = await generateConsultationTicketId();
|
||||
|
||||
// Build structured AI analysis
|
||||
const aiParts: string[] = [];
|
||||
if (aiContext?.industryLabel && aiContext?.process) aiParts.push(`[INDUSTRY] ${aiContext.industryLabel} — ${aiContext.process}`);
|
||||
if (aiContext?.estimatedSavingsPercent) aiParts.push(`[ESTIMATED SAVINGS] ~${aiContext.estimatedSavingsPercent}% energy reduction`);
|
||||
if (aiContext?.productionVolume) aiParts.push(`[PRODUCTION VOLUME] ${aiContext.productionVolume}`);
|
||||
if (aiContext?.conversationInsights?.length > 0) aiParts.push(`[AI DISCUSSION POINTS]\n${aiContext.conversationInsights.map((i: string) => `• ${i}`).join("\n")}`);
|
||||
if (aiContext?.suggestedTopics?.length > 0) aiParts.push(`[SUGGESTED ENGINEERING TOPICS]\n${aiContext.suggestedTopics.map((t: string) => `→ ${t}`).join("\n")}`);
|
||||
if (contact?.preferredContact) aiParts.push(`[PREFERRED CONTACT] ${contact.preferredContact.toUpperCase()}`);
|
||||
if (contact?.timeframe) aiParts.push(`[TIMEFRAME] ${contact.timeframe}`);
|
||||
if (meta?.source) aiParts.push(`[SOURCE] ${meta.source} — ${meta.url || "N/A"}`);
|
||||
|
||||
const aiAnalysis = aiParts.join("\n\n");
|
||||
const messageParts: string[] = [];
|
||||
if (contact.message) messageParts.push(contact.message);
|
||||
if (contact.timeframe) messageParts.push(`Timeframe: ${contact.timeframe}`);
|
||||
if (contact.preferredContact) messageParts.push(`Preferred contact: ${contact.preferredContact}`);
|
||||
|
||||
// Save to DB
|
||||
const signal = await prisma.operationsSignal.create({
|
||||
data: {
|
||||
ticketId,
|
||||
type: "CONSULTATION",
|
||||
status: "PENDING",
|
||||
clientName: contact.name,
|
||||
clientEmail: contact.email,
|
||||
clientCompany: contact.company,
|
||||
clientPhone: contact.phone || null,
|
||||
message: messageParts.join("\n") || null,
|
||||
cartPayload: "[]",
|
||||
attachedFiles: "[]",
|
||||
aiAnalysis,
|
||||
},
|
||||
});
|
||||
|
||||
// Resolve email targets
|
||||
const route = await prisma.notificationRoute.findUnique({ where: { routeType: "CONSULTATION" } });
|
||||
const targetEmails = route && route.isActive
|
||||
? route.emails.split(",").map((e: string) => e.trim()).filter(Boolean)
|
||||
: ["engineering@fluxsrl.com"];
|
||||
|
||||
const appUrl = process.env.NEXT_PUBLIC_APP_URL || "https://flux.com";
|
||||
|
||||
// Send via SMTP
|
||||
const emailResult = await sendEmail({
|
||||
to: targetEmails,
|
||||
subject: `[CONSULTATION] ${aiContext?.industryLabel || "General"} inquiry from ${contact.company} — ${ticketId}`,
|
||||
html: generateConsultationEmail(contact, aiContext, ticketId, appUrl),
|
||||
replyTo: contact.email,
|
||||
});
|
||||
|
||||
// Track email delivery
|
||||
await prisma.operationsSignal.update({
|
||||
where: { id: signal.id },
|
||||
data: {
|
||||
emailSentTo: emailResult.sentTo.join(", "),
|
||||
emailSentAt: emailResult.sentAt,
|
||||
emailError: emailResult.error,
|
||||
},
|
||||
});
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
ticketId,
|
||||
emailSent: emailResult.success,
|
||||
emailError: emailResult.error,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Consultation API error:", error);
|
||||
return NextResponse.json({ error: "Failed to submit consultation request" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
function generateConsultationEmail(contact: any, aiContext: any, ticketId: string, appUrl: string) {
|
||||
const insights = (aiContext?.conversationInsights || []).map((i: string) => `<li style="margin-bottom: 6px;">${i}</li>`).join("");
|
||||
const topics = (aiContext?.suggestedTopics || []).map((t: string) => `<li style="margin-bottom: 4px; color: #0066CC;">${t}</li>`).join("");
|
||||
|
||||
return `
|
||||
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 600px; margin: 0 auto; color: #1D1D1F;">
|
||||
<div style="border-bottom: 2px solid #00F0FF; padding-bottom: 20px; margin-bottom: 24px;">
|
||||
<p style="color: #86868B; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;">FLUX AI — Engineering Consultation</p>
|
||||
<h1 style="margin: 8px 0 0 0; font-size: 22px;">New Consultation Request</h1>
|
||||
<p style="font-family: monospace; color: #00F0FF;">${ticketId}</p>
|
||||
</div>
|
||||
<div style="background: #F5F5F7; padding: 20px; border-radius: 12px; margin-bottom: 24px;">
|
||||
<p style="margin: 4px 0;"><strong>${contact.name}</strong> — ${contact.company}</p>
|
||||
<p style="margin: 4px 0;">Email: <a href="mailto:${contact.email}" style="color: #0066CC;">${contact.email}</a></p>
|
||||
${contact.phone ? `<p style="margin: 4px 0;">Phone: ${contact.phone}</p>` : ""}
|
||||
<p style="margin: 4px 0;">Preferred: <strong>${(contact.preferredContact || "email").toUpperCase()}</strong> · Timeframe: <strong>${contact.timeframe || "N/A"}</strong></p>
|
||||
</div>
|
||||
${aiContext?.industryLabel ? `<div style="background: #F0FBFF; border-left: 4px solid #00F0FF; padding: 16px 20px; border-radius: 0 12px 12px 0; margin-bottom: 24px;"><h3 style="margin: 0 0 8px 0; font-size: 13px; color: #00F0FF;">AI Context</h3><p style="margin: 4px 0;"><strong>Industry:</strong> ${aiContext.industryLabel} — ${aiContext.process || "General"}</p>${aiContext.estimatedSavingsPercent ? `<p style="color: #059669;"><strong>Savings:</strong> ~${aiContext.estimatedSavingsPercent}%</p>` : ""}${aiContext.productionVolume ? `<p><strong>Volume:</strong> ${aiContext.productionVolume}</p>` : ""}</div>` : ""}
|
||||
${insights ? `<div style="margin-bottom: 24px;"><h3 style="font-size: 13px; color: #86868B;">Key Points</h3><ul style="padding-left: 20px;">${insights}</ul></div>` : ""}
|
||||
${topics ? `<div style="margin-bottom: 24px;"><h3 style="font-size: 13px; color: #0066CC;">Prepare Topics</h3><ul style="padding-left: 20px; list-style: none;">${topics}</ul></div>` : ""}
|
||||
${contact.message ? `<div style="margin-bottom: 24px;"><h3 style="font-size: 13px; color: #86868B;">Client Notes</h3><div style="padding: 12px; border-left: 4px solid #1D1D1F; background: #FAFAFA;">${contact.message}</div></div>` : ""}
|
||||
<div style="border-top: 1px solid #E5E5EA; padding-top: 16px; margin-top: 32px; font-size: 11px; color: #86868B; text-align: center;"><p>FLUX Operations · Reply to contact ${contact.name} directly.</p></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// FLUX SRL — Health Check Endpoint
|
||||
// Place this at: src/app/api/health/route.ts
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
import { prisma } from '@/lib/prisma';
|
||||
import { NextResponse } from 'next/server';
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
// Verify database connectivity
|
||||
await prisma.$queryRaw`SELECT 1`;
|
||||
|
||||
return NextResponse.json({
|
||||
status: 'healthy',
|
||||
timestamp: new Date().toISOString(),
|
||||
uptime: Math.floor(process.uptime()),
|
||||
version: process.env.npm_package_version || '0.1.0',
|
||||
});
|
||||
} catch {
|
||||
return NextResponse.json(
|
||||
{ status: 'unhealthy', error: 'Database connection failed' },
|
||||
{ status: 503 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
|
||||
// 1. REGLAS DE SEGURIDAD ESTRICTAS
|
||||
const ALLOWED_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.webp', '.mp4', '.mov'];
|
||||
const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50MB Límite
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const formData = await request.formData();
|
||||
const file = formData.get("file") as File;
|
||||
const ticketId = formData.get("ticketId") as string;
|
||||
const clientName = formData.get("clientName") as string || "unregistered";
|
||||
|
||||
// 2. VALIDACIONES INICIALES
|
||||
if (!file || !ticketId) {
|
||||
return NextResponse.json({ error: "Faltan datos requeridos (archivo o ticketId)" }, { status: 400 });
|
||||
}
|
||||
|
||||
if (file.size > MAX_FILE_SIZE) {
|
||||
return NextResponse.json({ error: "El archivo excede el límite de 50MB" }, { status: 400 });
|
||||
}
|
||||
|
||||
const ext = path.extname(file.name).toLowerCase();
|
||||
if (!ALLOWED_EXTENSIONS.includes(ext)) {
|
||||
return NextResponse.json({ error: `Formato no permitido. Solo aceptamos: ${ALLOWED_EXTENSIONS.join(", ")}` }, { status: 400 });
|
||||
}
|
||||
|
||||
// 3. SANITIZACIÓN DE NOMBRES (Evita inyección de código y caracteres raros)
|
||||
const safeTicketId = ticketId.replace(/[^a-zA-Z0-9-]/g, "");
|
||||
// Convertimos "David Herran!" a "david-herran"
|
||||
const safeClientName = clientName.toLowerCase().replace(/[^a-z0-9]/g, "-").substring(0, 30);
|
||||
const folderName = `${safeTicketId}-${safeClientName}`;
|
||||
|
||||
// 4. CREACIÓN DE LA CARPETA DEL CLIENTE
|
||||
// Ruta final: /public/operations-inbox/REQ-2026-X8Y-david-herran/
|
||||
const uploadDir = path.join(process.cwd(), "public", "operations-inbox", folderName);
|
||||
|
||||
// Escudo Anti-Hacking (Verifica que la ruta resuelta no se escape de la carpeta public)
|
||||
if (!path.resolve(uploadDir).startsWith(path.resolve(process.cwd(), "public", "operations-inbox"))) {
|
||||
return NextResponse.json({ error: "Ruta de directorio inválida" }, { status: 400 });
|
||||
}
|
||||
|
||||
if (!fs.existsSync(uploadDir)) {
|
||||
fs.mkdirSync(uploadDir, { recursive: true });
|
||||
}
|
||||
|
||||
// 5. GUARDAR EL ARCHIVO FÍSICAMENTE
|
||||
const safeFileName = file.name.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9._-]/g, "");
|
||||
const filePath = path.join(uploadDir, safeFileName);
|
||||
|
||||
const buffer = Buffer.from(await file.arrayBuffer());
|
||||
fs.writeFileSync(filePath, buffer);
|
||||
|
||||
// 6. DEVOLVER LA URL PÚBLICA PARA GUARDARLA EN POSTGRES
|
||||
const publicUrl = `/operations-inbox/${folderName}/${safeFileName}`;
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
url: publicUrl,
|
||||
fileName: safeFileName,
|
||||
type: ext === '.mp4' || ext === '.mov' ? 'video' : 'image'
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error crítico en subida pública:", error);
|
||||
return NextResponse.json({ error: "Error interno del servidor" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
+49
-15
@@ -1,26 +1,60 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--font-sans: var(--font-inter), sans-serif;
|
||||
--animate-ping-slow: ping-slow 3s cubic-bezier(0, 0, 0.2, 1) infinite;
|
||||
@keyframes ping-slow {
|
||||
75%, 100% { transform: scale(2); opacity: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
:root { --background: #F5F5F7; --foreground: #1D1D1F; }
|
||||
.dark { --background: #0A0A0C; --foreground: #F5F5F7; }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
FIX 1 — SCROLL HORIZONTAL EN iOS SAFARI
|
||||
Causa raíz: elementos Three.js fixed + transforms de framer-motion
|
||||
crean un "scroll container" fantasma en WebKit.
|
||||
Solución: bloquear con las 3 propiedades a la vez.
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
overscroll-behavior-x: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
transition: background-color 0.5s ease, color 0.5s ease;
|
||||
overflow-x: hidden;
|
||||
overscroll-behavior-x: none;
|
||||
touch-action: pan-y;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
button { outline: none; }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
FIX 2 — ANTI-FLICKERING EN DESKTOP
|
||||
Causa raíz: backdrop-blur + opacity/transform de AnimatePresence
|
||||
en el mismo frame fuerzan repaints en cascada.
|
||||
Solución: capa GPU dedicada con translateZ(0).
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
[class*="backdrop-blur"] {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
FIX 3 — CANVAS BREATHINGFIELD
|
||||
Clase .breathing-field-wrapper añadida en BreathingField.tsx.
|
||||
Este canvas es decorativo → nunca debe capturar gestos táctiles.
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
.breathing-field-wrapper canvas {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
//src/app/hq-command/dashboard/applications/actions.ts
|
||||
|
||||
"use server";
|
||||
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { unstable_noStore as noStore } from "next/cache"; // 🔥 ANTI-CACHÉ
|
||||
// 🔥 IMPORTAMOS EL TRADUCTOR DE IA
|
||||
import { translateContentForCMS } from "@/lib/aiTranslator";
|
||||
|
||||
const generateSlug = (title: string) => {
|
||||
return title.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, '');
|
||||
};
|
||||
|
||||
// 1. OBTENER LA LISTA DE APLICACIONES
|
||||
export async function getApplications() {
|
||||
noStore();
|
||||
try {
|
||||
const apps = await prisma.application.findMany({
|
||||
orderBy: { createdAt: "asc" }
|
||||
});
|
||||
return { success: true, apps };
|
||||
} catch (error) {
|
||||
return { error: "Failed to fetch applications." };
|
||||
}
|
||||
}
|
||||
|
||||
// 2. OBTENER UNA APLICACIÓN ESPECÍFICA
|
||||
export async function getApplicationBySlug(slug: string) {
|
||||
try {
|
||||
const app = await prisma.application.findUnique({
|
||||
where: { slug }
|
||||
});
|
||||
if (!app) return { error: "Application not found." };
|
||||
return { success: true, app };
|
||||
} catch (error) {
|
||||
return { error: "Failed to fetch application details." };
|
||||
}
|
||||
}
|
||||
|
||||
// 3. CREAR NUEVA APLICACIÓN (¡Ahora con IA!)
|
||||
export async function createApplication(formData: FormData) {
|
||||
try {
|
||||
const title = formData.get("title") as string;
|
||||
const subtitle = formData.get("subtitle") as string;
|
||||
const category = formData.get("category") as string;
|
||||
|
||||
// Capturamos el switch de IA
|
||||
const autoTranslate = formData.get("autoTranslate") === "on";
|
||||
const shortDescription = "New application ready to be configured.";
|
||||
|
||||
const slug = generateSlug(title);
|
||||
|
||||
let translationsJson = "{}";
|
||||
|
||||
// 🔥 LA MAGIA DE LA IA EN LA CREACIÓN 🔥
|
||||
if (autoTranslate) {
|
||||
const aiResult = await translateContentForCMS({
|
||||
title, subtitle, category, shortDescription
|
||||
});
|
||||
if (aiResult) translationsJson = JSON.stringify(aiResult);
|
||||
}
|
||||
|
||||
await prisma.application.create({
|
||||
data: {
|
||||
slug, title, subtitle, category,
|
||||
shortDescription,
|
||||
heroDescription: "", sectionsJson: "[]", advantagesJson: "[]", datasheetJson: "{}", dashboardMetricsJson: "[]",
|
||||
isActive: true,
|
||||
translationsJson
|
||||
}
|
||||
});
|
||||
|
||||
revalidatePath("/hq-command/dashboard/applications");
|
||||
revalidatePath("/[locale]", "layout");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: "Failed to create application. Title might already exist." };
|
||||
}
|
||||
}
|
||||
|
||||
// 4. ACTUALIZAR TODA LA INFORMACIÓN (¡Traduciendo JSONs completos!)
|
||||
export async function updateApplicationData(formData: FormData) {
|
||||
try {
|
||||
const slug = formData.get("slug") as string;
|
||||
const title = formData.get("title") as string;
|
||||
const subtitle = formData.get("subtitle") as string;
|
||||
const category = formData.get("category") as string;
|
||||
const shortDescription = formData.get("shortDescription") as string;
|
||||
const heroDescription = formData.get("heroDescription") as string;
|
||||
|
||||
const sectionsJson = formData.get("sectionsJson") as string;
|
||||
const advantagesJson = formData.get("advantagesJson") as string;
|
||||
const datasheetJson = formData.get("datasheetJson") as string || "{}";
|
||||
const dashboardMetricsJson = formData.get("dashboardMetricsJson") as string || "[]";
|
||||
|
||||
const autoTranslate = formData.get("autoTranslate") === "on";
|
||||
|
||||
let updateData: any = {
|
||||
title, subtitle, category, shortDescription, heroDescription,
|
||||
sectionsJson, advantagesJson, datasheetJson, dashboardMetricsJson
|
||||
};
|
||||
|
||||
// 🔥 LA MAGIA DE LA IA PARA EL CONTENIDO PROFUNDO 🔥
|
||||
// Nota: Le mandamos los JSON stringificados. GPT-4o los traducirá y nos los devolverá con la misma estructura.
|
||||
if (autoTranslate) {
|
||||
const aiResult = await translateContentForCMS({
|
||||
title, subtitle, category, shortDescription, heroDescription,
|
||||
sectionsJson, advantagesJson, dashboardMetricsJson
|
||||
});
|
||||
if (aiResult) {
|
||||
updateData.translationsJson = JSON.stringify(aiResult);
|
||||
}
|
||||
}
|
||||
|
||||
await prisma.application.update({
|
||||
where: { slug },
|
||||
data: updateData
|
||||
});
|
||||
|
||||
revalidatePath(`/applications/${slug}`);
|
||||
revalidatePath("/hq-command/dashboard/applications");
|
||||
revalidatePath("/[locale]", "layout");
|
||||
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error("Update Error:", error);
|
||||
return { error: "Failed to update application data." };
|
||||
}
|
||||
}
|
||||
|
||||
// 5. OCULTAR / MOSTRAR APLICACIÓN
|
||||
export async function toggleApplication(slug: string, currentStatus: boolean) {
|
||||
try {
|
||||
await prisma.application.update({
|
||||
where: { slug },
|
||||
data: { isActive: !currentStatus }
|
||||
});
|
||||
revalidatePath("/hq-command/dashboard/applications");
|
||||
revalidatePath("/[locale]", "layout");
|
||||
return { success: true };
|
||||
} catch (e) {
|
||||
return { error: "Failed to toggle status." };
|
||||
}
|
||||
}
|
||||
|
||||
// 6. ELIMINAR APLICACIÓN
|
||||
export async function deleteApplication(slug: string) {
|
||||
try {
|
||||
await prisma.application.delete({ where: { slug } });
|
||||
revalidatePath("/hq-command/dashboard/applications");
|
||||
revalidatePath("/[locale]", "layout");
|
||||
return { success: true };
|
||||
} catch (e) {
|
||||
return { error: "Failed to delete application." };
|
||||
}
|
||||
}
|
||||
|
||||
// 7. LA SEMILLA: AUTO-POBLAR LA BASE DE DATOS (Intacto)
|
||||
export async function seedInitialApplications() {
|
||||
// ... Tu código actual de la semilla se queda exactamente igual ...
|
||||
// (Para mantener este mensaje limpio, asume que la función de seedInitialApplications() que ya tienes va aquí)
|
||||
}
|
||||
@@ -0,0 +1,746 @@
|
||||
//src/app/hq-command/dashboard/applications/page.ts
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
ArrowLeft, Layers, DatabaseZap, Loader2, X, CheckCircle2, FileText, LayoutTemplate, AlignLeft, Plus, Trash2, AlertCircle, Eye, EyeOff, Sparkles,
|
||||
Bold, Italic, Heading1, Heading2, Heading3, List, ListOrdered, Quote, Table, Minus, Image as ImageIcon, Video, Box, Type, Code, RotateCcw, RotateCw,
|
||||
Maximize2, Minimize2, ChevronDown, FolderOpen, Upload, FolderPlus, ChevronRight, File, ArrowUpFromLine, Search, Grid3X3, LayoutList, Copy, Check
|
||||
} from "lucide-react";
|
||||
import { getApplications, createApplication, updateApplicationData, toggleApplication, deleteApplication } from "./actions";
|
||||
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// 🔥 ASSET MANAGER — File Browser, Upload & Folder Creation
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Connects to /api/assets to browse, upload, and organize media files
|
||||
// within /public/applications/{slug}/
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
interface AssetItem {
|
||||
name: string;
|
||||
type: "file" | "folder";
|
||||
mediaType?: string;
|
||||
extension?: string;
|
||||
path: string;
|
||||
publicUrl?: string;
|
||||
size?: string;
|
||||
sizeBytes?: number;
|
||||
modifiedAt?: string;
|
||||
childCount?: number;
|
||||
}
|
||||
|
||||
interface AssetManagerProps {
|
||||
slug: string;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onInsert: (markdownSyntax: string) => void;
|
||||
}
|
||||
|
||||
function AssetManager({ slug, isOpen, onClose, onInsert }: AssetManagerProps) {
|
||||
const [currentPath, setCurrentPath] = useState("");
|
||||
const [items, setItems] = useState<AssetItem[]>([]);
|
||||
const [breadcrumbs, setBreadcrumbs] = useState<{name: string; path: string}[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [uploadProgress, setUploadProgress] = useState("");
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [showNewFolder, setShowNewFolder] = useState(false);
|
||||
const [newFolderName, setNewFolderName] = useState("");
|
||||
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [copiedPath, setCopiedPath] = useState<string | null>(null);
|
||||
|
||||
const fetchAssets = useCallback(async (dirPath: string = "") => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const params = new URLSearchParams({ slug, path: dirPath });
|
||||
const res = await fetch(`/api/assets?${params}`);
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
setItems(data.items);
|
||||
setBreadcrumbs(data.breadcrumbs);
|
||||
setCurrentPath(dirPath);
|
||||
} else {
|
||||
setError(data.error || "Failed to load directory");
|
||||
}
|
||||
} catch (err) {
|
||||
setError("Connection error — make sure /api/assets/route.ts exists.");
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, [slug]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) { fetchAssets(currentPath); setSearchQuery(""); }
|
||||
}, [isOpen, fetchAssets]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const navigateTo = (folderPath: string) => { fetchAssets(folderPath); };
|
||||
|
||||
const uploadFile = async (file: File) => {
|
||||
setIsUploading(true);
|
||||
setUploadProgress(`Uploading ${file.name}...`);
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append("slug", slug);
|
||||
formData.append("path", currentPath);
|
||||
formData.append("file", file);
|
||||
const res = await fetch("/api/assets", { method: "POST", body: formData });
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
setUploadProgress(`✓ ${data.file.name} uploaded`);
|
||||
await fetchAssets(currentPath);
|
||||
setTimeout(() => setUploadProgress(""), 2000);
|
||||
} else {
|
||||
setUploadProgress(`✗ Error: ${data.error}`);
|
||||
setTimeout(() => setUploadProgress(""), 4000);
|
||||
}
|
||||
} catch (err) {
|
||||
setUploadProgress("✗ Upload failed");
|
||||
setTimeout(() => setUploadProgress(""), 3000);
|
||||
}
|
||||
setIsUploading(false);
|
||||
};
|
||||
|
||||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = e.target.files;
|
||||
if (files) Array.from(files).forEach(uploadFile);
|
||||
e.target.value = "";
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(true); };
|
||||
const handleDragLeave = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(false); };
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault(); setIsDragging(false);
|
||||
const files = e.dataTransfer.files;
|
||||
if (files.length > 0) Array.from(files).forEach(uploadFile);
|
||||
};
|
||||
|
||||
const createFolder = async () => {
|
||||
if (!newFolderName.trim()) return;
|
||||
try {
|
||||
const res = await fetch("/api/assets", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ slug, folderName: newFolderName, parentPath: currentPath }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
setShowNewFolder(false); setNewFolderName(""); await fetchAssets(currentPath);
|
||||
} else { alert(data.error || "Failed to create folder"); }
|
||||
} catch { alert("Connection error creating folder"); }
|
||||
};
|
||||
|
||||
const deleteFile = async (filePath: string, fileName: string) => {
|
||||
if (!confirm(`Delete "${fileName}"? This cannot be undone.`)) return;
|
||||
try {
|
||||
const res = await fetch("/api/assets", {
|
||||
method: "DELETE",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ slug, filePath }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.success) await fetchAssets(currentPath);
|
||||
else alert(data.error);
|
||||
} catch { alert("Failed to delete file"); }
|
||||
};
|
||||
|
||||
const insertAsset = (item: AssetItem) => {
|
||||
if (item.type === "folder") return;
|
||||
const url = item.publicUrl || `/applications/${slug}/${item.path}`;
|
||||
let syntax = "";
|
||||
switch (item.mediaType) {
|
||||
case "image": syntax = ``; break;
|
||||
case "video": syntax = `[VIDEO:${url}]`; break;
|
||||
case "model": syntax = `[3D:${url}]`; break;
|
||||
default: syntax = `[${item.name}](${url})`;
|
||||
}
|
||||
onInsert(syntax);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const copyPath = (item: AssetItem) => {
|
||||
const url = item.publicUrl || `/applications/${slug}/${item.path}`;
|
||||
navigator.clipboard.writeText(url);
|
||||
setCopiedPath(item.path);
|
||||
setTimeout(() => setCopiedPath(null), 1500);
|
||||
};
|
||||
|
||||
const filteredItems = searchQuery
|
||||
? items.filter(item => item.name.toLowerCase().includes(searchQuery.toLowerCase()))
|
||||
: items;
|
||||
|
||||
const renderThumbnail = (item: AssetItem) => {
|
||||
if (item.type === "folder") return <div className="w-full h-full flex items-center justify-center bg-white/[0.02]"><FolderOpen size={28} className="text-purple-400/70" /></div>;
|
||||
if (item.mediaType === "image" && item.publicUrl) return <img src={item.publicUrl} alt={item.name} className="w-full h-full object-cover" loading="lazy" />;
|
||||
if (item.mediaType === "video") return <div className="w-full h-full flex items-center justify-center bg-blue-500/5"><Video size={24} className="text-blue-400/60" /></div>;
|
||||
if (item.mediaType === "model") return <div className="w-full h-full flex items-center justify-center bg-purple-500/5"><Box size={24} className="text-purple-400/60" /></div>;
|
||||
return <div className="w-full h-full flex items-center justify-center bg-white/[0.02]"><File size={24} className="text-[#86868B]/50" /></div>;
|
||||
};
|
||||
|
||||
const typeBadge = (mediaType?: string) => {
|
||||
const styles: Record<string, string> = {
|
||||
image: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
|
||||
video: "bg-blue-500/10 text-blue-400 border-blue-500/20",
|
||||
model: "bg-purple-500/10 text-purple-400 border-purple-500/20",
|
||||
document: "bg-amber-500/10 text-amber-400 border-amber-500/20",
|
||||
};
|
||||
return styles[mediaType || ""] || "bg-white/5 text-[#86868B] border-white/10";
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[70] flex items-center justify-center p-4 bg-black/85 backdrop-blur-md">
|
||||
<div className="bg-[#0D0D0D] border border-white/10 w-full max-w-4xl rounded-[2rem] shadow-2xl flex flex-col max-h-[85vh] relative overflow-hidden"
|
||||
onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop}>
|
||||
|
||||
{isDragging && (
|
||||
<div className="absolute inset-0 z-50 bg-purple-500/10 border-2 border-dashed border-purple-500/50 rounded-[2rem] flex items-center justify-center backdrop-blur-sm">
|
||||
<div className="text-center">
|
||||
<ArrowUpFromLine size={48} className="text-purple-400 mx-auto mb-3 animate-bounce" />
|
||||
<p className="text-purple-400 font-medium text-lg">Drop files to upload</p>
|
||||
<p className="text-[#86868B] text-sm mt-1">to /applications/{slug}/{currentPath || "root"}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Header */}
|
||||
<div className="px-6 py-5 border-b border-white/10 shrink-0">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-purple-500/15 rounded-xl text-purple-400"><FolderOpen size={20} /></div>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-white">Asset Manager</h3>
|
||||
<p className="text-[10px] text-[#86868B] uppercase tracking-widest font-mono">/public/applications/{slug}/</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={onClose} className="text-[#86868B] hover:text-white p-2 hover:bg-white/5 rounded-xl transition-all"><X size={20} /></button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-1 text-sm overflow-x-auto [scrollbar-width:none] flex-1 min-w-0">
|
||||
{breadcrumbs.map((crumb, idx) => (
|
||||
<span key={idx} className="flex items-center shrink-0">
|
||||
{idx > 0 && <ChevronRight size={12} className="text-[#86868B]/50 mx-0.5" />}
|
||||
<button onClick={() => navigateTo(crumb.path)} className={`px-2 py-1 rounded-lg transition-colors text-xs ${idx === breadcrumbs.length - 1 ? "text-purple-400 bg-purple-500/10" : "text-[#86868B] hover:text-white hover:bg-white/5"}`}>{crumb.name}</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<div className="relative">
|
||||
<Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[#86868B]" />
|
||||
<input value={searchQuery} onChange={e => setSearchQuery(e.target.value)} placeholder="Filter..." className="bg-white/5 border border-white/10 rounded-lg pl-8 pr-3 py-1.5 text-xs text-white w-32 focus:w-48 transition-all outline-none focus:border-purple-500/50" />
|
||||
</div>
|
||||
<div className="flex bg-white/5 rounded-lg border border-white/10 overflow-hidden">
|
||||
<button onClick={() => setViewMode("grid")} className={`p-1.5 transition-colors ${viewMode === "grid" ? "bg-purple-500/20 text-purple-400" : "text-[#86868B] hover:text-white"}`}><Grid3X3 size={14} /></button>
|
||||
<button onClick={() => setViewMode("list")} className={`p-1.5 transition-colors ${viewMode === "list" ? "bg-purple-500/20 text-purple-400" : "text-[#86868B] hover:text-white"}`}><LayoutList size={14} /></button>
|
||||
</div>
|
||||
<button onClick={() => setShowNewFolder(!showNewFolder)} className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-[#86868B] hover:text-white bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 transition-all"><FolderPlus size={13} /> Folder</button>
|
||||
<button onClick={() => fileInputRef.current?.click()} disabled={isUploading} className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-white bg-purple-500 rounded-lg hover:bg-purple-400 transition-all disabled:opacity-50 font-medium"><Upload size={13} /> Upload</button>
|
||||
<input ref={fileInputRef} type="file" multiple accept=".jpg,.jpeg,.png,.webp,.gif,.svg,.avif,.mp4,.webm,.mov,.glb,.gltf,.usdz,.pdf" onChange={handleFileSelect} className="hidden" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showNewFolder && (
|
||||
<div className="flex items-center gap-2 mt-3 pt-3 border-t border-white/5">
|
||||
<FolderPlus size={14} className="text-purple-400 shrink-0" />
|
||||
<input value={newFolderName} onChange={e => setNewFolderName(e.target.value)} onKeyDown={e => { if (e.key === "Enter") createFolder(); if (e.key === "Escape") { setShowNewFolder(false); setNewFolderName(""); } }} placeholder="folder-name (lowercase, hyphens ok)" autoFocus className="flex-1 bg-black/40 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-white focus:border-purple-500 outline-none font-mono" />
|
||||
<button onClick={createFolder} className="px-3 py-1.5 text-xs bg-purple-500 text-white rounded-lg hover:bg-purple-400 font-medium">Create</button>
|
||||
<button onClick={() => { setShowNewFolder(false); setNewFolderName(""); }} className="px-3 py-1.5 text-xs text-[#86868B] hover:text-white">Cancel</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{uploadProgress && (
|
||||
<div className="mt-3 pt-3 border-t border-white/5">
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
{isUploading && <Loader2 size={12} className="animate-spin text-purple-400" />}
|
||||
<span className={isUploading ? "text-purple-400" : uploadProgress.startsWith("✓") ? "text-emerald-400" : "text-red-400"}>{uploadProgress}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-4 [scrollbar-width:none]">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-20"><Loader2 size={24} className="animate-spin text-purple-400" /></div>
|
||||
) : error ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center">
|
||||
<AlertCircle size={32} className="text-red-400/50 mb-3" />
|
||||
<p className="text-red-400/80 text-sm mb-1">{error}</p>
|
||||
<p className="text-[#86868B] text-xs">Make sure <code className="bg-white/5 px-1.5 py-0.5 rounded text-purple-400">/api/assets/route.ts</code> exists.</p>
|
||||
</div>
|
||||
) : filteredItems.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center">
|
||||
<FolderOpen size={48} className="text-[#86868B]/20 mb-4" />
|
||||
{searchQuery ? (
|
||||
<p className="text-[#86868B] text-sm">No files matching "{searchQuery}"</p>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-[#86868B] text-sm mb-2">This directory is empty</p>
|
||||
<p className="text-[#86868B]/60 text-xs">Upload files or create subfolders to organize your assets</p>
|
||||
<div className="flex gap-2 mt-4">
|
||||
{["images", "videos", "models"].map(folder => (
|
||||
<button key={folder} onClick={async () => {
|
||||
await fetch("/api/assets", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ slug, folderName: folder, parentPath: currentPath }) });
|
||||
fetchAssets(currentPath);
|
||||
}} className="px-3 py-2 text-xs text-purple-400 bg-purple-500/10 border border-purple-500/20 rounded-lg hover:bg-purple-500/20 transition-colors">+ {folder}/</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : viewMode === "grid" ? (
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-3">
|
||||
{filteredItems.map((item) => (
|
||||
<div key={item.path} className="group relative bg-[#111] border border-white/5 rounded-xl overflow-hidden hover:border-purple-500/30 transition-all cursor-pointer" onClick={() => item.type === "folder" ? navigateTo(item.path) : insertAsset(item)}>
|
||||
<div className="aspect-square overflow-hidden bg-black/20">{renderThumbnail(item)}</div>
|
||||
<div className="p-2">
|
||||
<p className="text-[11px] text-white truncate font-medium">{item.name}</p>
|
||||
<div className="flex items-center justify-between mt-1">
|
||||
{item.type === "folder" ? (
|
||||
<span className="text-[9px] text-[#86868B]">{item.childCount} items</span>
|
||||
) : (
|
||||
<span className={`text-[9px] px-1.5 py-0.5 rounded border ${typeBadge(item.mediaType)}`}>{item.mediaType}</span>
|
||||
)}
|
||||
{item.size && <span className="text-[9px] text-[#86868B]">{item.size}</span>}
|
||||
</div>
|
||||
</div>
|
||||
{item.type === "file" && (
|
||||
<div className="absolute top-1 right-1 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button onClick={(e) => { e.stopPropagation(); copyPath(item); }} className="p-1.5 bg-black/70 backdrop-blur-sm rounded-lg text-[#86868B] hover:text-white transition-colors" title="Copy path">
|
||||
{copiedPath === item.path ? <Check size={11} className="text-emerald-400" /> : <Copy size={11} />}
|
||||
</button>
|
||||
<button onClick={(e) => { e.stopPropagation(); deleteFile(item.path, item.name); }} className="p-1.5 bg-black/70 backdrop-blur-sm rounded-lg text-[#86868B] hover:text-red-400 transition-colors" title="Delete"><Trash2 size={11} /></button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{filteredItems.map((item) => (
|
||||
<div key={item.path} className="group flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-white/[0.03] transition-colors cursor-pointer" onClick={() => item.type === "folder" ? navigateTo(item.path) : insertAsset(item)}>
|
||||
<div className="w-8 h-8 rounded-lg overflow-hidden shrink-0 border border-white/5">
|
||||
{item.type === "folder" ? <div className="w-full h-full flex items-center justify-center bg-purple-500/10"><FolderOpen size={14} className="text-purple-400" /></div>
|
||||
: item.mediaType === "image" && item.publicUrl ? <img src={item.publicUrl} alt="" className="w-full h-full object-cover" loading="lazy" />
|
||||
: <div className={`w-full h-full flex items-center justify-center ${item.mediaType === "video" ? "bg-blue-500/10" : item.mediaType === "model" ? "bg-purple-500/10" : "bg-white/5"}`}>
|
||||
{item.mediaType === "video" ? <Video size={12} className="text-blue-400" /> : item.mediaType === "model" ? <Box size={12} className="text-purple-400" /> : <File size={12} className="text-[#86868B]" />}
|
||||
</div>}
|
||||
</div>
|
||||
<span className="text-sm text-white flex-1 truncate">{item.name}</span>
|
||||
{item.type === "file" && <span className={`text-[9px] px-2 py-0.5 rounded border shrink-0 ${typeBadge(item.mediaType)}`}>{item.extension}</span>}
|
||||
{item.type === "folder" && <span className="text-[9px] text-[#86868B] shrink-0">{item.childCount} items</span>}
|
||||
{item.size && <span className="text-[10px] text-[#86868B] w-16 text-right shrink-0">{item.size}</span>}
|
||||
{item.type === "file" && (
|
||||
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
|
||||
<button onClick={(e) => { e.stopPropagation(); copyPath(item); }} className="p-1.5 rounded-lg text-[#86868B] hover:text-white hover:bg-white/10 transition-colors">{copiedPath === item.path ? <Check size={12} className="text-emerald-400" /> : <Copy size={12} />}</button>
|
||||
<button onClick={(e) => { e.stopPropagation(); deleteFile(item.path, item.name); }} className="p-1.5 rounded-lg text-[#86868B] hover:text-red-400 hover:bg-red-500/10 transition-colors"><Trash2 size={12} /></button>
|
||||
</div>
|
||||
)}
|
||||
{item.type === "folder" && <ChevronRight size={14} className="text-[#86868B]/50 shrink-0" />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-3 border-t border-white/10 flex items-center justify-between text-[10px] text-[#86868B] shrink-0 bg-black/20">
|
||||
<span>{filteredItems.length} items{searchQuery ? " (filtered)" : ""} • Click a file to insert into editor</span>
|
||||
<span className="font-mono">Drag & drop supported</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// 🔥 MARKDOWN EDITOR — Rich Toolbar + Asset Manager
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
interface MarkdownToolbarProps {
|
||||
name: string;
|
||||
defaultValue?: string;
|
||||
required?: boolean;
|
||||
rows?: number;
|
||||
placeholder?: string;
|
||||
slug?: string;
|
||||
}
|
||||
|
||||
function MarkdownEditor({ name, defaultValue = "", required, rows = 12, placeholder, slug }: MarkdownToolbarProps) {
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const [value, setValue] = useState(defaultValue);
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [showInsertMenu, setShowInsertMenu] = useState(false);
|
||||
const [history, setHistory] = useState<string[]>([defaultValue]);
|
||||
const [historyIndex, setHistoryIndex] = useState(0);
|
||||
const insertMenuRef = useRef<HTMLDivElement>(null);
|
||||
const [isAssetManagerOpen, setIsAssetManagerOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (insertMenuRef.current && !insertMenuRef.current.contains(e.target as Node)) setShowInsertMenu(false);
|
||||
};
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
const historyTimeout = useRef<NodeJS.Timeout | null>(null);
|
||||
const pushHistory = useCallback((newValue: string) => {
|
||||
if (historyTimeout.current) clearTimeout(historyTimeout.current);
|
||||
historyTimeout.current = setTimeout(() => {
|
||||
setHistory(prev => [...prev.slice(0, historyIndex + 1), newValue].slice(-50));
|
||||
setHistoryIndex(prev => Math.min(prev + 1, 49));
|
||||
}, 500);
|
||||
}, [historyIndex]);
|
||||
|
||||
const handleChange = (newValue: string) => { setValue(newValue); pushHistory(newValue); };
|
||||
const undo = () => { if (historyIndex > 0) { const i = historyIndex - 1; setHistoryIndex(i); setValue(history[i]); } };
|
||||
const redo = () => { if (historyIndex < history.length - 1) { const i = historyIndex + 1; setHistoryIndex(i); setValue(history[i]); } };
|
||||
|
||||
const getSelection = () => {
|
||||
const ta = textareaRef.current;
|
||||
if (!ta) return { start: 0, end: 0, selected: "", before: "", after: "" };
|
||||
return { start: ta.selectionStart, end: ta.selectionEnd, selected: value.substring(ta.selectionStart, ta.selectionEnd), before: value.substring(0, ta.selectionStart), after: value.substring(ta.selectionEnd) };
|
||||
};
|
||||
|
||||
const replaceSelection = (newText: string, cursorOffset?: number) => {
|
||||
const { before, after } = getSelection();
|
||||
handleChange(before + newText + after);
|
||||
const pos = cursorOffset !== undefined ? before.length + cursorOffset : before.length + newText.length;
|
||||
setTimeout(() => { const ta = textareaRef.current; if (ta) { ta.focus(); ta.setSelectionRange(pos, pos); } }, 0);
|
||||
};
|
||||
|
||||
const wrapSelection = (prefix: string, suffix: string) => {
|
||||
const { selected } = getSelection();
|
||||
if (selected) { replaceSelection(`${prefix}${selected}${suffix}`, prefix.length + selected.length + suffix.length); }
|
||||
else { replaceSelection(`${prefix}text${suffix}`, prefix.length); }
|
||||
};
|
||||
|
||||
const insertAtCursor = (text: string, cursorOffset?: number) => { replaceSelection(text, cursorOffset); };
|
||||
|
||||
const handleAssetInsert = (markdownSyntax: string) => { insertAtCursor(`\n${markdownSyntax}\n`); };
|
||||
|
||||
const prependLine = (prefix: string) => {
|
||||
const { start, selected } = getSelection();
|
||||
const lineStart = value.lastIndexOf('\n', start - 1) + 1;
|
||||
const before = value.substring(0, lineStart);
|
||||
const currentLine = selected || value.substring(lineStart).split('\n')[0];
|
||||
const afterLine = value.substring(lineStart + currentLine.length);
|
||||
handleChange(before + prefix + currentLine + afterLine);
|
||||
setTimeout(() => { const ta = textareaRef.current; if (ta) { ta.focus(); ta.setSelectionRange(lineStart + prefix.length, lineStart + prefix.length + currentLine.length); } }, 0);
|
||||
};
|
||||
|
||||
const actions = {
|
||||
bold: () => wrapSelection("**", "**"),
|
||||
italic: () => wrapSelection("*", "*"),
|
||||
h1: () => prependLine("# "),
|
||||
h2: () => prependLine("## "),
|
||||
h3: () => prependLine("### "),
|
||||
quote: () => prependLine("> "),
|
||||
ul: () => insertAtCursor("\n- Item 1\n- Item 2\n- Item 3\n", 3),
|
||||
ol: () => insertAtCursor("\n1. First\n2. Second\n3. Third\n", 4),
|
||||
hr: () => insertAtCursor("\n---\n"),
|
||||
table: () => insertAtCursor("\n| Column A | Column B | Highlight |\n|---|---|---|\n| Data 1 | Data 2 | Value 1 |\n| Data 3 | Data 4 | Value 2 |\n", 2),
|
||||
image: () => { insertAtCursor(`\n![Image description](/applications/${slug || "your-slug"}/image-name.jpg)\n`, 3); },
|
||||
video: () => { insertAtCursor(`\n[VIDEO:/applications/${slug || "your-slug"}/videos/video-name.mp4]\n`, 8); },
|
||||
model3d: () => { insertAtCursor(`\n[3D:/applications/${slug || "your-slug"}/models/model-name.glb]\n`, 5); },
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
const isMod = e.metaKey || e.ctrlKey;
|
||||
if (isMod && e.key === 'b') { e.preventDefault(); actions.bold(); }
|
||||
if (isMod && e.key === 'i') { e.preventDefault(); actions.italic(); }
|
||||
if (isMod && e.key === 'z') { e.preventDefault(); e.shiftKey ? redo() : undo(); }
|
||||
if (e.key === 'Tab') { e.preventDefault(); insertAtCursor(" "); }
|
||||
};
|
||||
|
||||
const ToolBtn = ({ icon: Icon, label, onClick, className = "" }: { icon: any; label: string; onClick: () => void; className?: string }) => (
|
||||
<button type="button" onClick={onClick} title={label} className={`p-1.5 rounded-lg text-[#86868B] hover:text-white hover:bg-white/10 transition-all active:scale-90 ${className}`}><Icon size={15} strokeWidth={2} /></button>
|
||||
);
|
||||
const Divider = () => <div className="w-px h-5 bg-white/10 mx-1" />;
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col ${isExpanded ? "fixed inset-0 z-[60] bg-[#0A0A0A] p-6" : ""}`}>
|
||||
<input type="hidden" name={name} value={value} />
|
||||
|
||||
<div className={`flex flex-wrap items-center gap-0.5 px-2 py-1.5 bg-black/60 border border-white/10 rounded-t-xl ${isExpanded ? "border-b-0 rounded-t-2xl" : ""}`}>
|
||||
<ToolBtn icon={Bold} label="Bold (⌘B)" onClick={actions.bold} />
|
||||
<ToolBtn icon={Italic} label="Italic (⌘I)" onClick={actions.italic} />
|
||||
<Divider />
|
||||
<ToolBtn icon={Heading1} label="Heading 1" onClick={actions.h1} />
|
||||
<ToolBtn icon={Heading2} label="Heading 2" onClick={actions.h2} />
|
||||
<ToolBtn icon={Heading3} label="Heading 3" onClick={actions.h3} />
|
||||
<Divider />
|
||||
<ToolBtn icon={List} label="Bullet List" onClick={actions.ul} />
|
||||
<ToolBtn icon={ListOrdered} label="Numbered List" onClick={actions.ol} />
|
||||
<ToolBtn icon={Quote} label="Blockquote" onClick={actions.quote} />
|
||||
<ToolBtn icon={Table} label="Insert Table" onClick={actions.table} />
|
||||
<ToolBtn icon={Minus} label="Horizontal Rule" onClick={actions.hr} />
|
||||
<Divider />
|
||||
|
||||
<div className="relative" ref={insertMenuRef}>
|
||||
<button type="button" onClick={() => setShowInsertMenu(!showInsertMenu)} className="flex items-center gap-1 px-2 py-1.5 rounded-lg text-purple-400 hover:text-purple-300 hover:bg-purple-500/10 transition-all text-[11px] font-semibold uppercase tracking-wider">
|
||||
<Plus size={13} /> Insert <ChevronDown size={11} className={`transition-transform ${showInsertMenu ? "rotate-180" : ""}`} />
|
||||
</button>
|
||||
{showInsertMenu && (
|
||||
<div className="absolute top-full left-0 mt-1 w-56 bg-[#1A1A1A] border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden animate-in fade-in slide-in-from-top-2 duration-150">
|
||||
<div className="p-1">
|
||||
<button type="button" onClick={() => { actions.image(); setShowInsertMenu(false); }} className="w-full flex items-center gap-3 px-3 py-2.5 text-sm text-white/80 hover:text-white hover:bg-white/5 rounded-lg transition-colors text-left">
|
||||
<div className="p-1.5 bg-emerald-500/15 rounded-lg text-emerald-400"><ImageIcon size={14} /></div>
|
||||
<div><p className="text-xs font-medium">Image</p><p className="text-[10px] text-[#86868B]">.jpg .png .webp</p></div>
|
||||
</button>
|
||||
<button type="button" onClick={() => { actions.video(); setShowInsertMenu(false); }} className="w-full flex items-center gap-3 px-3 py-2.5 text-sm text-white/80 hover:text-white hover:bg-white/5 rounded-lg transition-colors text-left">
|
||||
<div className="p-1.5 bg-blue-500/15 rounded-lg text-blue-400"><Video size={14} /></div>
|
||||
<div><p className="text-xs font-medium">Video</p><p className="text-[10px] text-[#86868B]">.mp4 local file</p></div>
|
||||
</button>
|
||||
<button type="button" onClick={() => { actions.model3d(); setShowInsertMenu(false); }} className="w-full flex items-center gap-3 px-3 py-2.5 text-sm text-white/80 hover:text-white hover:bg-white/5 rounded-lg transition-colors text-left">
|
||||
<div className="p-1.5 bg-purple-500/15 rounded-lg text-purple-400"><Box size={14} /></div>
|
||||
<div><p className="text-xs font-medium">3D Model</p><p className="text-[10px] text-[#86868B]">.glb / .usdz (AR)</p></div>
|
||||
</button>
|
||||
<div className="border-t border-white/5 mt-1 pt-1">
|
||||
<button type="button" onClick={() => { actions.table(); setShowInsertMenu(false); }} className="w-full flex items-center gap-3 px-3 py-2.5 text-sm text-white/80 hover:text-white hover:bg-white/5 rounded-lg transition-colors text-left">
|
||||
<div className="p-1.5 bg-amber-500/15 rounded-lg text-amber-400"><Table size={14} /></div>
|
||||
<div><p className="text-xs font-medium">Data Table</p><p className="text-[10px] text-[#86868B]">Auto-highlighted last column</p></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{slug && (<><Divider /><button type="button" onClick={() => setIsAssetManagerOpen(true)} className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10 transition-all text-[11px] font-semibold uppercase tracking-wider" title="Browse & upload media files"><FolderOpen size={14} /> Assets</button></>)}
|
||||
|
||||
<div className="flex-1" />
|
||||
<ToolBtn icon={RotateCcw} label="Undo (⌘Z)" onClick={undo} className={historyIndex <= 0 ? "opacity-30 pointer-events-none" : ""} />
|
||||
<ToolBtn icon={RotateCw} label="Redo (⌘⇧Z)" onClick={redo} className={historyIndex >= history.length - 1 ? "opacity-30 pointer-events-none" : ""} />
|
||||
<Divider />
|
||||
<ToolBtn icon={isExpanded ? Minimize2 : Maximize2} label={isExpanded ? "Exit Fullscreen" : "Fullscreen"} onClick={() => setIsExpanded(!isExpanded)} />
|
||||
</div>
|
||||
|
||||
<textarea ref={textareaRef} value={value} onChange={(e) => handleChange(e.target.value)} onKeyDown={handleKeyDown} required={required} rows={isExpanded ? 40 : rows} placeholder={placeholder} className={`w-full bg-black/40 border border-white/10 border-t-0 p-4 text-white font-mono text-sm focus:border-purple-500 outline-none resize-none leading-relaxed ${isExpanded ? "flex-1 rounded-b-2xl text-base leading-loose" : "rounded-b-xl"}`} style={{ tabSize: 2 }} />
|
||||
|
||||
<div className="flex items-center justify-between mt-1.5 px-1">
|
||||
<div className="flex items-center gap-3 text-[10px] text-[#86868B] font-mono"><span>{value.split('\n').length} lines</span><span className="text-white/10">|</span><span>{value.length} chars</span></div>
|
||||
<div className="flex items-center gap-2 text-[10px] text-[#86868B]"><span className="opacity-60">⌘B Bold</span><span className="opacity-60">⌘I Italic</span><span className="opacity-60">Tab Indent</span></div>
|
||||
</div>
|
||||
|
||||
{!isExpanded && (
|
||||
<div className="bg-purple-500/10 border border-purple-500/20 rounded-xl p-4 text-xs text-[#86868B] font-mono leading-relaxed mt-3">
|
||||
<p className="text-purple-400 font-semibold uppercase tracking-widest mb-2 text-[10px]">Markdown Cheat Sheet:</p>
|
||||
<p><strong># Title 1</strong> | <strong>## Title 2</strong> | <strong>**Bold**</strong></p>
|
||||
<p className="mt-1"><strong>- List Item</strong> | <strong>> Blockquote</strong></p>
|
||||
<p className="mt-1 text-purple-400"><strong>![Image Description](/applications/{slug || "slug"}/image.jpg)</strong></p>
|
||||
<div className="mt-3 pt-3 border-t border-purple-500/10">
|
||||
<p className="mb-1"><strong>Media Assets <span className="text-emerald-400">(use the Assets button to browse & upload)</span>:</strong></p>
|
||||
<p className="text-emerald-400/80">![alt](/applications/{slug || "slug"}/images/photo.jpg) — Image</p>
|
||||
<p className="text-blue-400/80 mt-1">[VIDEO:/applications/{slug || "slug"}/videos/clip.mp4] — Video</p>
|
||||
<p className="text-purple-400/80 mt-1">[3D:/applications/{slug || "slug"}/models/machine.glb] — 3D Model</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{slug && <AssetManager slug={slug} isOpen={isAssetManagerOpen} onClose={() => setIsAssetManagerOpen(false)} onInsert={handleAssetInsert} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// 🔥 MAIN PAGE — Applications Manager (Knowledge Base)
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function ApplicationsManager() {
|
||||
const router = useRouter();
|
||||
const [apps, setApps] = useState<any[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [editingApp, setEditingApp] = useState<any | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState<"basic" | "advantages" | "sections" | "dashboard">("basic");
|
||||
const [advantages, setAdvantages] = useState<any[]>([]);
|
||||
const [sections, setSections] = useState<any[]>([]);
|
||||
const [dashboardMetrics, setDashboardMetrics] = useState<any[]>([]);
|
||||
|
||||
const fetchApps = async () => { setIsLoading(true); const res = await getApplications(); if (res.success && res.apps) setApps(res.apps); setIsLoading(false); };
|
||||
useEffect(() => { fetchApps(); }, []);
|
||||
|
||||
const openEditModal = (app: any) => {
|
||||
setEditingApp(app); setActiveTab("basic");
|
||||
try { setAdvantages(JSON.parse(app.advantagesJson || "[]")); } catch { setAdvantages([]); }
|
||||
try { setSections(JSON.parse(app.sectionsJson || "[]")); } catch { setSections([]); }
|
||||
try { setDashboardMetrics(JSON.parse(app.dashboardMetricsJson || "[]")); } catch { setDashboardMetrics([]); }
|
||||
};
|
||||
|
||||
const handleSave = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault(); setIsSubmitting(true);
|
||||
const formData = new FormData(e.currentTarget);
|
||||
formData.append("advantagesJson", JSON.stringify(advantages));
|
||||
formData.append("sectionsJson", JSON.stringify(sections));
|
||||
formData.append("dashboardMetricsJson", JSON.stringify(dashboardMetrics));
|
||||
const res = await updateApplicationData(formData);
|
||||
if (res.error) { alert("Error saving data: " + res.error); }
|
||||
else { setEditingApp(null); await fetchApps(); router.refresh(); }
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
const handleCreate = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault(); setIsSubmitting(true);
|
||||
await createApplication(new FormData(e.currentTarget));
|
||||
setIsCreateModalOpen(false); fetchApps(); setIsSubmitting(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-6 md:p-12 max-w-7xl mx-auto">
|
||||
<div className="mb-10">
|
||||
<Link href="/hq-command/dashboard" className="inline-flex items-center gap-2 text-sm text-[#86868B] hover:text-purple-400 transition-colors mb-6 group"><ArrowLeft size={16} className="group-hover:-translate-x-1 transition-transform" /> Back to Command Center</Link>
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-light text-white flex items-center gap-3"><Layers className="text-purple-400" /> Knowledge Base</h1>
|
||||
<p className="text-[#86868B] mt-2">Manage the technical literature and general specifications of your application categories.</p>
|
||||
</div>
|
||||
<button onClick={() => setIsCreateModalOpen(true)} className="flex items-center gap-2 bg-purple-500/10 text-purple-400 border border-purple-500/20 px-5 py-2.5 rounded-xl font-medium hover:bg-purple-500 hover:text-white transition-all"><Plus size={18} /> New Application</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#111] border border-white/5 rounded-3xl overflow-hidden shadow-2xl">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead><tr className="border-b border-white/5 text-[10px] uppercase tracking-widest text-[#86868B] bg-black/40"><th className="p-6 font-semibold">Application Sector</th><th className="p-6 font-semibold">Status</th><th className="p-6 font-semibold">Visibility</th><th className="p-6 font-semibold text-right">Actions</th></tr></thead>
|
||||
<tbody>
|
||||
{isLoading ? (
|
||||
<tr><td colSpan={4} className="p-8 text-center text-[#86868B]"><Loader2 className="animate-spin mx-auto mb-2" size={24} /> Loading database...</td></tr>
|
||||
) : apps.map((app) => {
|
||||
const isPopulated = app.heroDescription && app.heroDescription.length > 10;
|
||||
return (
|
||||
<tr key={app.slug} className={`border-b border-white/5 transition-colors group ${app.isActive ? 'hover:bg-white/[0.02]' : 'opacity-50'}`}>
|
||||
<td className="p-6"><p className="font-medium text-white">{app.title}</p><p className="text-xs text-[#86868B] font-mono mt-1">/{app.slug}</p></td>
|
||||
<td className="p-6">{isPopulated ? <span className="bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-3 py-1 rounded-full text-[10px] uppercase tracking-wider flex items-center gap-1.5 w-fit font-semibold"><CheckCircle2 size={12} /> Populated</span> : <span className="bg-white/5 text-[#86868B] border border-white/10 px-3 py-1 rounded-full text-[10px] uppercase tracking-wider flex items-center gap-1.5 w-fit"><AlertCircle size={12} /> Pending Setup</span>}</td>
|
||||
<td className="p-6"><button onClick={() => {toggleApplication(app.slug, app.isActive); fetchApps();}} className={`text-xs font-medium px-3 py-1 rounded-full flex items-center gap-1.5 transition-colors ${app.isActive ? 'bg-purple-500/10 text-purple-400' : 'bg-red-500/10 text-red-400'}`}>{app.isActive ? <><Eye size={12} /> Visible</> : <><EyeOff size={12} /> Hidden</>}</button></td>
|
||||
<td className="p-6 text-right"><div className="flex justify-end gap-2"><button onClick={() => openEditModal(app)} className={`inline-flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-semibold transition-all ${isPopulated ? 'bg-white/5 text-white hover:bg-white/10' : 'bg-purple-500 text-white hover:bg-purple-400'}`}><DatabaseZap size={14} /> Manage Core</button><button onClick={() => { if(confirm("Delete this application forever?")) { deleteApplication(app.slug); fetchApps(); } }} className="text-[#86868B] hover:text-red-400 p-2 rounded-lg transition-colors opacity-0 group-hover:opacity-100"><Trash2 size={18}/></button></div></td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isCreateModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
|
||||
<div className="bg-[#111] border border-white/10 w-full max-w-lg rounded-[2rem] p-8 relative shadow-2xl">
|
||||
<button onClick={() => setIsCreateModalOpen(false)} className="absolute top-6 right-6 text-[#86868B] hover:text-white"><X size={20} /></button>
|
||||
<h3 className="text-2xl font-light mb-6 text-purple-400">Add New Application</h3>
|
||||
<form onSubmit={handleCreate} className="space-y-4">
|
||||
<div><label className="block text-[10px] uppercase text-[#86868B] mb-1">Title</label><input name="title" required placeholder="e.g. Digital Printing" className="w-full bg-black/40 border border-white/10 rounded-xl p-3 text-white focus:border-purple-500 outline-none" /></div>
|
||||
<div><label className="block text-[10px] uppercase text-[#86868B] mb-1">Subtitle</label><input name="subtitle" required placeholder="e.g. Inkjet Drying" className="w-full bg-black/40 border border-white/10 rounded-xl p-3 text-white focus:border-purple-500 outline-none" /></div>
|
||||
<div><label className="block text-[10px] uppercase text-[#86868B] mb-1">Category Label</label><input name="category" required placeholder="e.g. Graphic Arts" className="w-full bg-black/40 border border-white/10 rounded-xl p-3 text-white focus:border-purple-500 outline-none" /></div>
|
||||
<div className="bg-gradient-to-r from-purple-500/10 to-transparent border border-purple-500/20 p-4 rounded-xl flex items-center justify-between mt-6">
|
||||
<div className="flex items-center gap-3"><div className="p-2 bg-purple-500/20 rounded-lg text-purple-400"><Sparkles size={18} /></div><div><p className="text-sm text-white font-medium">Flux AI Auto-Translate</p><p className="text-[10px] text-[#86868B] uppercase tracking-widest mt-0.5">Generates Base Locales</p></div></div>
|
||||
<label className="relative inline-flex items-center cursor-pointer"><input type="checkbox" name="autoTranslate" defaultChecked className="sr-only peer" /><div className="w-11 h-6 bg-black/50 border border-white/10 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-500"></div></label>
|
||||
</div>
|
||||
<button type="submit" disabled={isSubmitting} className="w-full bg-purple-500 text-white py-3 mt-2 rounded-xl text-sm font-semibold hover:bg-purple-400 flex items-center justify-center gap-2">{isSubmitting ? <Loader2 size={16} className="animate-spin" /> : "Create Application"}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{editingApp && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
|
||||
<div className="bg-[#111] border border-white/10 w-full max-w-4xl rounded-[2rem] p-0 relative shadow-2xl flex flex-col max-h-[90vh]">
|
||||
<div className="p-6 md:p-8 border-b border-white/10 relative pb-0 shrink-0">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-purple-500 to-transparent"></div>
|
||||
<button onClick={() => setEditingApp(null)} className="absolute top-6 right-6 text-[#86868B] hover:text-white transition-colors"><X size={20} /></button>
|
||||
<h3 className="text-2xl font-light mb-1 text-purple-400">Data Management Core</h3>
|
||||
<p className="text-[#86868B] text-[10px] uppercase font-mono tracking-widest mb-6">Route: /{editingApp.slug.toUpperCase()}</p>
|
||||
<div className="flex gap-6 border-b border-white/10 overflow-x-auto">
|
||||
{[{ id: "basic", label: "Overview", icon: FileText },{ id: "advantages", label: "Advantages", icon: CheckCircle2 },{ id: "sections", label: "Tech Sections", icon: AlignLeft },{ id: "dashboard", label: "Dashboard UI", icon: LayoutTemplate }].map(t => (
|
||||
<button key={t.id} type="button" onClick={() => setActiveTab(t.id as any)} className={`pb-4 text-xs uppercase tracking-widest font-semibold flex items-center gap-2 transition-all border-b-2 whitespace-nowrap ${activeTab === t.id ? "text-purple-400 border-purple-400" : "text-[#86868B] border-transparent hover:text-white"}`}><t.icon size={14} /> {t.label}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="edit-app-form" onSubmit={handleSave} className="flex-1 overflow-y-auto p-6 md:p-8 [scrollbar-width:none]">
|
||||
<input type="hidden" name="slug" value={editingApp.slug} />
|
||||
|
||||
<div className={activeTab === "basic" ? "space-y-6 animate-in fade-in" : "hidden"}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div><label className="block text-[10px] uppercase text-[#86868B] mb-1">Display Title</label><input name="title" defaultValue={editingApp.title} required className="w-full bg-black/40 border border-white/10 rounded-xl p-3 text-white focus:border-purple-500 outline-none" /></div>
|
||||
<div><label className="block text-[10px] uppercase text-[#86868B] mb-1">Subtitle</label><input name="subtitle" defaultValue={editingApp.subtitle} required className="w-full bg-black/40 border border-white/10 rounded-xl p-3 text-white focus:border-purple-500 outline-none" /></div>
|
||||
</div>
|
||||
<div><label className="block text-[10px] uppercase text-[#86868B] mb-1">Category Label</label><input name="category" defaultValue={editingApp.category} required className="w-full bg-black/40 border border-white/10 rounded-xl p-3 text-white focus:border-purple-500 outline-none" /></div>
|
||||
<div><label className="block text-[10px] uppercase text-purple-400 mb-1 flex items-center justify-between"><span>External Card Description (Homepage)</span><span className="text-[#86868B]">Max 150 chars</span></label><textarea name="shortDescription" defaultValue={editingApp.shortDescription} required rows={2} placeholder="Short summary for the public homepage cards..." className="w-full bg-purple-500/5 border border-purple-500/20 rounded-xl p-3 text-white focus:border-purple-500 outline-none resize-none" /></div>
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase text-[#86868B] mb-2 flex justify-between items-center"><span>Deep Page Story (Markdown)</span><span className="text-purple-400/60 text-[9px] font-normal normal-case">Rich Editor + Asset Manager</span></label>
|
||||
<MarkdownEditor name="heroDescription" defaultValue={editingApp.heroDescription} required rows={14} placeholder="Write the application's deep technical content here using Markdown..." slug={editingApp.slug} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={activeTab === "advantages" ? "space-y-4 animate-in fade-in" : "hidden"}>
|
||||
{advantages.map((adv, idx) => (
|
||||
<div key={idx} className="bg-black/40 border border-white/10 p-4 rounded-xl relative group">
|
||||
<button type="button" onClick={() => setAdvantages(advantages.filter((_, i) => i !== idx))} className="absolute top-4 right-4 text-[#86868B] hover:text-red-400"><Trash2 size={16}/></button>
|
||||
<input value={adv.title} onChange={e => { const n = [...advantages]; n[idx].title = e.target.value; setAdvantages(n); }} placeholder="Advantage Title" className="w-full bg-black/40 border border-white/10 rounded-lg p-2 text-sm text-white mb-3 focus:border-purple-500 outline-none" />
|
||||
<textarea value={adv.description} onChange={e => { const n = [...advantages]; n[idx].description = e.target.value; setAdvantages(n); }} placeholder="Description..." rows={2} className="w-full bg-black/40 border border-white/10 rounded-lg p-2 text-sm text-white focus:border-purple-500 outline-none resize-none" />
|
||||
</div>
|
||||
))}
|
||||
<button type="button" onClick={() => setAdvantages([...advantages, { title: "", description: "" }])} className="w-full border border-dashed border-white/20 text-[#86868B] hover:text-white hover:border-purple-500 py-3 rounded-xl flex items-center justify-center gap-2"><Plus size={16}/> Add Advantage</button>
|
||||
</div>
|
||||
|
||||
<div className={activeTab === "sections" ? "space-y-6 animate-in fade-in" : "hidden"}>
|
||||
{sections.map((sec, secIdx) => (
|
||||
<div key={secIdx} className="bg-black/40 border border-white/10 p-6 rounded-2xl relative">
|
||||
<button type="button" onClick={() => setSections(sections.filter((_, i) => i !== secIdx))} className="absolute top-4 right-4 text-[#86868B] hover:text-red-400"><Trash2 size={16}/></button>
|
||||
<div className="flex gap-4 mb-4">
|
||||
<div className="flex-1"><input value={sec.title} onChange={e => { const n = [...sections]; n[secIdx].title = e.target.value; setSections(n); }} placeholder="Section Title" className="w-full bg-black/40 border border-white/10 rounded-lg p-2 text-sm text-white focus:border-purple-500 outline-none" /></div>
|
||||
<label className="flex items-center gap-2 text-sm text-white mt-2 cursor-pointer"><input type="checkbox" checked={sec.isMainTech} onChange={e => { const n = [...sections]; n[secIdx].isMainTech = e.target.checked; setSections(n); }} className="accent-purple-500" /> Main Tech</label>
|
||||
</div>
|
||||
<div className="pl-4 border-l-2 border-white/10 space-y-3">
|
||||
{sec.items.map((item: any, itemIdx: number) => (
|
||||
<div key={itemIdx} className="flex gap-2">
|
||||
<input value={item.label} onChange={e => { const n = [...sections]; n[secIdx].items[itemIdx].label = e.target.value; setSections(n); }} placeholder="Label" className="w-1/3 bg-black/40 border border-white/10 rounded-lg p-2 text-xs text-white outline-none" />
|
||||
<input value={item.content} onChange={e => { const n = [...sections]; n[secIdx].items[itemIdx].content = e.target.value; setSections(n); }} placeholder="Content" className="flex-1 bg-black/40 border border-white/10 rounded-lg p-2 text-xs text-white outline-none" />
|
||||
<button type="button" onClick={() => { const n = [...sections]; n[secIdx].items.splice(itemIdx, 1); setSections(n); }} className="text-[#86868B] hover:text-red-400 p-2"><Trash2 size={14}/></button>
|
||||
</div>
|
||||
))}
|
||||
<button type="button" onClick={() => { const n = [...sections]; n[secIdx].items.push({ label: "", content: "" }); setSections(n); }} className="text-xs text-purple-400 hover:text-white flex items-center gap-1 mt-2"><Plus size={12}/> Add Row</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<button type="button" onClick={() => setSections([...sections, { title: "", isMainTech: false, items: [] }])} className="w-full border border-dashed border-white/20 text-[#86868B] hover:text-white py-3 rounded-xl flex items-center justify-center gap-2"><Plus size={16}/> Add Section</button>
|
||||
</div>
|
||||
|
||||
<div className={activeTab === "dashboard" ? "space-y-4 animate-in fade-in" : "hidden"}>
|
||||
{dashboardMetrics.map((metric, idx) => (
|
||||
<div key={idx} className="bg-black/40 border border-white/10 p-4 rounded-xl relative grid grid-cols-3 gap-3">
|
||||
<button type="button" onClick={() => setDashboardMetrics(dashboardMetrics.filter((_, i) => i !== idx))} className="absolute -top-2 -right-2 text-[#86868B] hover:text-red-400 bg-black rounded-full p-1"><Trash2 size={14}/></button>
|
||||
<input value={metric.label} onChange={e => { const n = [...dashboardMetrics]; n[idx].label = e.target.value; setDashboardMetrics(n); }} placeholder="Label" className="w-full bg-black/40 border border-white/10 rounded-lg p-2 text-sm text-white outline-none" />
|
||||
<input value={metric.value} onChange={e => { const n = [...dashboardMetrics]; n[idx].value = e.target.value; setDashboardMetrics(n); }} placeholder="Value (e.g. 5kW)" className="w-full bg-black/40 border border-[#00F0FF]/30 rounded-lg p-2 text-sm text-[#00F0FF] outline-none" />
|
||||
<input value={metric.subtext} onChange={e => { const n = [...dashboardMetrics]; n[idx].subtext = e.target.value; setDashboardMetrics(n); }} placeholder="Subtext" className="w-full bg-black/40 border border-white/10 rounded-lg p-2 text-sm text-[#86868B] outline-none" />
|
||||
</div>
|
||||
))}
|
||||
<button type="button" onClick={() => setDashboardMetrics([...dashboardMetrics, { label: "", value: "", subtext: "" }])} className="w-full border border-dashed border-white/20 text-[#86868B] hover:text-white py-3 rounded-xl flex items-center justify-center gap-2"><Plus size={16}/> Add Metric</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-r from-purple-500/10 to-transparent border border-purple-500/20 p-4 rounded-xl flex items-center justify-between mt-10">
|
||||
<div className="flex items-center gap-3"><div className="p-2 bg-purple-500/20 rounded-lg text-purple-400"><Sparkles size={18} /></div><div><p className="text-sm text-white font-medium">Flux AI JSON Translation</p><p className="text-[10px] text-[#86868B] uppercase tracking-widest mt-0.5">Translates Markdown & Complex Data Arrays</p></div></div>
|
||||
<label className="relative inline-flex items-center cursor-pointer"><input type="checkbox" name="autoTranslate" defaultChecked className="sr-only peer" /><div className="w-11 h-6 bg-black/50 border border-white/10 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-500"></div></label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="p-6 border-t border-white/10 bg-[#111] rounded-b-[2rem] flex justify-end gap-3 shrink-0">
|
||||
<button type="button" onClick={() => setEditingApp(null)} className="px-5 py-3 text-sm font-medium text-[#86868B] hover:text-white">Cancel</button>
|
||||
<button onClick={() => (document.getElementById("edit-app-form") as HTMLFormElement)?.requestSubmit()} disabled={isSubmitting} className="flex items-center gap-2 bg-purple-500 text-white px-8 py-3 rounded-xl text-sm font-semibold hover:bg-purple-400 disabled:opacity-50 transition-colors shadow-[0_0_15px_rgba(168,85,247,0.3)]">{isSubmitting ? <><Loader2 size={18} className="animate-spin" /> Processing AI...</> : "Deploy Changes"}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
"use server";
|
||||
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import bcrypt from "bcryptjs";
|
||||
|
||||
// 1. MÉTRICAS DEL SISTEMA (RAM y Uptime)
|
||||
export async function getSystemMetrics() {
|
||||
try {
|
||||
await prisma.$queryRaw`SELECT 1`; // Ping a Postgres
|
||||
const mem = process.memoryUsage();
|
||||
return {
|
||||
success: true,
|
||||
dbStatus: "Connected - Optimal",
|
||||
uptime: process.uptime(),
|
||||
memory: {
|
||||
used: Math.round(mem.heapUsed / 1024 / 1024),
|
||||
total: Math.round(mem.heapTotal / 1024 / 1024),
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
dbStatus: "Disconnected",
|
||||
uptime: process.uptime(),
|
||||
memory: { used: 0, total: 0 }
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// 2. EXPORTAR BASE DE DATOS (SNAPSHOT)
|
||||
export async function exportDatabase() {
|
||||
try {
|
||||
const data = {
|
||||
adminUsers: await prisma.adminUser.findMany(),
|
||||
globalNodes: await prisma.globalNode.findMany(),
|
||||
applications: await prisma.application.findMany(),
|
||||
timelineEvents: await prisma.timelineEvent.findMany(),
|
||||
newsArticles: await prisma.newsArticle.findMany(),
|
||||
heritageSections: await prisma.heritageSection.findMany(),
|
||||
spareParts: await prisma.sparePart.findMany(),
|
||||
operationsSignals: await prisma.operationsSignal.findMany(),
|
||||
notificationRoutes: await prisma.notificationRoute.findMany(),
|
||||
pageContents: await prisma.pageContent.findMany(),
|
||||
};
|
||||
|
||||
// Retornamos el JSON como string
|
||||
return { success: true, data: JSON.stringify(data) };
|
||||
} catch (error) {
|
||||
console.error("Export Error:", error);
|
||||
return { error: "Failed to generate database snapshot." };
|
||||
}
|
||||
}
|
||||
|
||||
// 3. RESTAURAR BASE DE DATOS (DANGER ZONE)
|
||||
export async function restoreDatabase(formData: FormData) {
|
||||
const username = formData.get("username") as string;
|
||||
const password = formData.get("password") as string;
|
||||
const confirm = formData.get("confirm") as string;
|
||||
const jsonString = formData.get("jsonString") as string;
|
||||
|
||||
if (confirm !== "CONFIRM-RESTORE") return { error: "Security phrase is incorrect." };
|
||||
if (!username || !password || !jsonString) return { error: "Missing required fields." };
|
||||
|
||||
try {
|
||||
// A. Validar Identidad del Administrador
|
||||
const admin = await prisma.adminUser.findUnique({ where: { username: username.toLowerCase().trim() } });
|
||||
if (!admin) return { error: "Invalid credentials or unauthorized access." };
|
||||
|
||||
const isValid = await bcrypt.compare(password, admin.passwordHash);
|
||||
if (!isValid) return { error: "Invalid credentials or unauthorized access." };
|
||||
|
||||
// B. Parsear el JSON y revivir las Fechas (Prisma necesita objetos Date, no strings)
|
||||
const dateRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/;
|
||||
const data = JSON.parse(jsonString, (key, value) => {
|
||||
if (typeof value === 'string' && dateRegex.test(value)) return new Date(value);
|
||||
return value;
|
||||
});
|
||||
|
||||
if (!data.adminUsers || !data.applications) return { error: "Invalid backup file structure." };
|
||||
|
||||
// C. Ejecutar Restauración en Transacción (Todo o Nada)
|
||||
await prisma.$transaction(async (tx: any) => {
|
||||
// Borrado Total
|
||||
await tx.adminUser.deleteMany();
|
||||
await tx.globalNode.deleteMany();
|
||||
await tx.application.deleteMany();
|
||||
await tx.timelineEvent.deleteMany();
|
||||
await tx.newsArticle.deleteMany();
|
||||
await tx.heritageSection.deleteMany();
|
||||
await tx.sparePart.deleteMany();
|
||||
await tx.operationsSignal.deleteMany();
|
||||
await tx.notificationRoute.deleteMany();
|
||||
await tx.pageContent.deleteMany();
|
||||
|
||||
// Sembrado de Datos
|
||||
if (data.adminUsers.length) await tx.adminUser.createMany({ data: data.adminUsers });
|
||||
if (data.globalNodes.length) await tx.globalNode.createMany({ data: data.globalNodes });
|
||||
if (data.applications.length) await tx.application.createMany({ data: data.applications });
|
||||
if (data.timelineEvents.length) await tx.timelineEvent.createMany({ data: data.timelineEvents });
|
||||
if (data.newsArticles.length) await tx.newsArticle.createMany({ data: data.newsArticles });
|
||||
if (data.heritageSections.length) await tx.heritageSection.createMany({ data: data.heritageSections });
|
||||
if (data.spareParts.length) await tx.sparePart.createMany({ data: data.spareParts });
|
||||
if (data.operationsSignals.length) await tx.operationsSignal.createMany({ data: data.operationsSignals });
|
||||
if (data.notificationRoutes.length) await tx.notificationRoute.createMany({ data: data.notificationRoutes });
|
||||
if (data.pageContents.length) await tx.pageContent.createMany({ data: data.pageContents });
|
||||
});
|
||||
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error("Restore Error:", error);
|
||||
return { error: "Database restore failed. The backup file might be corrupted." };
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,219 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
ArrowLeft, Server, Activity, Database, HardDrive,
|
||||
DownloadCloud, ShieldAlert, UploadCloud, Loader2, CheckCircle2
|
||||
} from "lucide-react";
|
||||
import { getSystemMetrics, exportDatabase, restoreDatabase } from "./actions";
|
||||
|
||||
export default function SystemHealth() {
|
||||
const [metrics, setMetrics] = useState<any>(null);
|
||||
const [isExporting, setIsExporting] = useState(false);
|
||||
|
||||
// Restore State
|
||||
const [isRestoring, setIsRestoring] = useState(false);
|
||||
const [restoreError, setRestoreError] = useState("");
|
||||
const [restoreSuccess, setRestoreSuccess] = useState(false);
|
||||
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const fetchMetrics = async () => {
|
||||
const res = await getSystemMetrics();
|
||||
if (res.success) setMetrics(res);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchMetrics();
|
||||
// Actualizar métricas cada 10 segundos
|
||||
const interval = setInterval(fetchMetrics, 10000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const formatUptime = (seconds: number) => {
|
||||
const d = Math.floor(seconds / (3600 * 24));
|
||||
const h = Math.floor(seconds % (3600 * 24) / 3600);
|
||||
const m = Math.floor(seconds % 3600 / 60);
|
||||
return `${d}d ${h}h ${m}m`;
|
||||
};
|
||||
|
||||
const handleExport = async () => {
|
||||
setIsExporting(true);
|
||||
const res = await exportDatabase();
|
||||
|
||||
if (res.success && res.data) {
|
||||
// Crear un Blob y forzar la descarga del JSON
|
||||
const blob = new Blob([res.data], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `flux-db-snapshot-${new Date().toISOString().split('T')[0]}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
} else {
|
||||
alert(res.error || "Export failed.");
|
||||
}
|
||||
setIsExporting(false);
|
||||
};
|
||||
|
||||
const handleRestore = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
if (!selectedFile) return setRestoreError("Please select a JSON backup file.");
|
||||
|
||||
setIsRestoring(true);
|
||||
setRestoreError("");
|
||||
|
||||
try {
|
||||
const reader = new FileReader();
|
||||
reader.onload = async (event) => {
|
||||
const jsonString = event.target?.result as string;
|
||||
|
||||
const formData = new FormData(e.currentTarget as HTMLFormElement);
|
||||
formData.append("jsonString", jsonString);
|
||||
|
||||
const res = await restoreDatabase(formData);
|
||||
|
||||
if (res.error) {
|
||||
setRestoreError(res.error);
|
||||
} else {
|
||||
setRestoreSuccess(true);
|
||||
// Recargar para forzar la re-lectura de la BD
|
||||
setTimeout(() => window.location.href = "/hq-command/dashboard", 3000);
|
||||
}
|
||||
setIsRestoring(false);
|
||||
};
|
||||
reader.readAsText(selectedFile);
|
||||
} catch (error) {
|
||||
setRestoreError("Failed to read the file.");
|
||||
setIsRestoring(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-6 md:p-12 max-w-5xl mx-auto">
|
||||
{/* HEADER */}
|
||||
<div className="mb-10">
|
||||
<Link href="/hq-command/dashboard" className="inline-flex items-center gap-2 text-sm text-[#86868B] hover:text-[#00F0FF] transition-colors mb-6 group">
|
||||
<ArrowLeft size={16} className="group-hover:-translate-x-1 transition-transform" /> Back to Command Center
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-3xl font-light text-white flex items-center gap-3">
|
||||
<Server className="text-blue-400" /> System Health & Vault
|
||||
</h1>
|
||||
<p className="text-[#86868B] mt-2">Server telemetry, data snapshots, and disaster recovery protocols.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TELEMETRÍA (MÉTRICAS) */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
|
||||
<div className="bg-[#111] border border-white/5 p-6 rounded-3xl relative overflow-hidden">
|
||||
<div className="absolute -right-4 -bottom-4 opacity-5"><Activity size={100} /></div>
|
||||
<span className="text-[10px] uppercase tracking-widest text-[#86868B] block mb-2">Node.js Uptime</span>
|
||||
<p className="text-2xl font-mono text-white">
|
||||
{metrics ? formatUptime(metrics.uptime) : "Loading..."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#111] border border-white/5 p-6 rounded-3xl relative overflow-hidden">
|
||||
<div className="absolute -right-4 -bottom-4 opacity-5"><HardDrive size={100} /></div>
|
||||
<span className="text-[10px] uppercase tracking-widest text-[#86868B] block mb-2">Heap Memory Usage</span>
|
||||
<p className="text-2xl font-mono text-white">
|
||||
{metrics ? `${metrics.memory.used} MB ` : "0 MB "}
|
||||
<span className="text-sm text-[#86868B]">/ {metrics ? metrics.memory.total : 0} MB</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#111] border border-white/5 p-6 rounded-3xl relative overflow-hidden">
|
||||
<div className="absolute -right-4 -bottom-4 opacity-5"><Database size={100} /></div>
|
||||
<span className="text-[10px] uppercase tracking-widest text-[#86868B] block mb-2">Postgres Connection</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="relative flex h-3 w-3">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
|
||||
</span>
|
||||
<p className="text-lg font-medium text-emerald-400">
|
||||
{metrics ? metrics.dbStatus : "Connecting..."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
|
||||
{/* ZONA VERDE: EXPORTAR (BACKUP) */}
|
||||
<div className="bg-[#111] border border-white/5 rounded-3xl p-8 flex flex-col">
|
||||
<div className="flex items-center gap-3 text-emerald-400 mb-4">
|
||||
<DownloadCloud size={24} />
|
||||
<h3 className="text-xl font-medium">Data Snapshot</h3>
|
||||
</div>
|
||||
<p className="text-sm text-[#86868B] leading-relaxed mb-8 flex-1">
|
||||
Download a complete JSON snapshot of your PostgreSQL database. This file contains all configurations, users, and content needed to perfectly clone or restore your environment via Docker.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleExport}
|
||||
disabled={isExporting}
|
||||
className="w-full bg-white text-black py-4 rounded-xl text-sm font-bold flex items-center justify-center gap-2 hover:bg-gray-200 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isExporting ? <><Loader2 size={18} className="animate-spin" /> Compiling Data...</> : "Download Secure Backup"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ZONA ROJA: RESTAURAR (DANGER ZONE) */}
|
||||
<div className="bg-rose-500/5 border border-rose-500/20 rounded-3xl p-8 relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-rose-500 to-transparent"></div>
|
||||
|
||||
{restoreSuccess ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-center animate-in fade-in zoom-in duration-500">
|
||||
<CheckCircle2 size={48} className="text-emerald-400 mb-4" />
|
||||
<h3 className="text-2xl font-light text-white mb-2">Restoration Complete</h3>
|
||||
<p className="text-[#86868B]">The database has been successfully overwritten. Rebooting session...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-3 text-rose-500 mb-4">
|
||||
<ShieldAlert size={24} />
|
||||
<h3 className="text-xl font-medium">Disaster Recovery</h3>
|
||||
</div>
|
||||
<p className="text-xs text-rose-400/80 leading-relaxed mb-6">
|
||||
<strong>WARNING:</strong> Uploading a snapshot will instantaneously erase all current database records and overwrite them. This process is irreversible.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleRestore} className="space-y-4">
|
||||
<div className="bg-black/40 border border-white/5 p-3 rounded-xl flex items-center justify-between">
|
||||
<span className="text-xs text-[#86868B] truncate max-w-[200px]">
|
||||
{selectedFile ? selectedFile.name : "No backup selected"}
|
||||
</span>
|
||||
<button type="button" onClick={() => fileInputRef.current?.click()} className="text-xs bg-white/10 hover:bg-white/20 text-white px-3 py-1.5 rounded-lg transition-colors">
|
||||
<UploadCloud size={14} className="inline mr-1" /> Select JSON
|
||||
</button>
|
||||
<input type="file" accept=".json" ref={fileInputRef} onChange={e => setSelectedFile(e.target.files?.[0] || null)} className="hidden" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<input required name="username" placeholder="Admin Username" className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm outline-none focus:border-rose-500" />
|
||||
<input required name="password" type="password" placeholder="Admin Password" className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm outline-none focus:border-rose-500" />
|
||||
</div>
|
||||
|
||||
<input required name="confirm" placeholder="Type CONFIRM-RESTORE" className="w-full bg-black/60 border border-rose-500/30 rounded-xl px-4 py-3 text-rose-400 font-mono text-sm text-center outline-none focus:border-rose-500" />
|
||||
|
||||
{restoreError && <div className="p-3 bg-rose-500/10 border border-rose-500/20 rounded-lg text-rose-400 text-xs text-center">{restoreError}</div>}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isRestoring || !selectedFile}
|
||||
className="w-full bg-rose-600 text-white py-4 rounded-xl text-sm font-bold flex items-center justify-center gap-2 hover:bg-rose-500 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isRestoring ? <><Loader2 size={18} className="animate-spin" /> Overwriting Database...</> : "Execute Destructive Restore"}
|
||||
</button>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
"use server";
|
||||
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { revalidatePath } from "next/cache";
|
||||
|
||||
// 🔥 IMPORTAMOS EL TRADUCTOR DE IA
|
||||
import { translateContentForCMS } from "@/lib/aiTranslator";
|
||||
|
||||
export async function getHeritageSections() {
|
||||
try {
|
||||
const sections = await prisma.heritageSection.findMany({
|
||||
orderBy: { order: 'asc' }
|
||||
});
|
||||
return { success: true, sections };
|
||||
} catch (error) {
|
||||
return { error: "Failed to fetch heritage data." };
|
||||
}
|
||||
}
|
||||
|
||||
export async function createHeritageSection(formData: FormData) {
|
||||
try {
|
||||
const type = formData.get("type") as string;
|
||||
const title = formData.get("title") as string;
|
||||
const content = formData.get("content") as string;
|
||||
const mediaUrl = formData.get("mediaUrl") as string;
|
||||
const order = parseInt(formData.get("order") as string) || 0;
|
||||
|
||||
// 🔥 Capturamos el switch de la IA
|
||||
const autoTranslate = formData.get("autoTranslate") === "on";
|
||||
let translationsJson = "{}";
|
||||
|
||||
if (autoTranslate && (title || content)) {
|
||||
const aiResult = await translateContentForCMS({
|
||||
title: title || "",
|
||||
content: content || ""
|
||||
});
|
||||
if (aiResult) translationsJson = JSON.stringify(aiResult);
|
||||
}
|
||||
|
||||
await prisma.heritageSection.create({
|
||||
data: { type, title, content, mediaUrl, order, translationsJson }
|
||||
});
|
||||
|
||||
revalidatePath("/hq-command/dashboard/heritage");
|
||||
revalidatePath("/[locale]/heritage", "layout");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: "Failed to add section to heritage." };
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateHeritageSection(formData: FormData) {
|
||||
try {
|
||||
const id = formData.get("id") as string;
|
||||
const type = formData.get("type") as string;
|
||||
const title = formData.get("title") as string;
|
||||
const content = formData.get("content") as string;
|
||||
const mediaUrl = formData.get("mediaUrl") as string;
|
||||
const order = parseInt(formData.get("order") as string) || 0;
|
||||
|
||||
const autoTranslate = formData.get("autoTranslate") === "on";
|
||||
let updateData: any = { type, title, content, mediaUrl, order };
|
||||
|
||||
// 🔥 LA MAGIA DE LA IA EN LA EDICIÓN 🔥
|
||||
if (autoTranslate && (title || content)) {
|
||||
const aiResult = await translateContentForCMS({
|
||||
title: title || "",
|
||||
content: content || ""
|
||||
});
|
||||
if (aiResult) updateData.translationsJson = JSON.stringify(aiResult);
|
||||
}
|
||||
|
||||
await prisma.heritageSection.update({
|
||||
where: { id },
|
||||
data: updateData
|
||||
});
|
||||
|
||||
revalidatePath("/hq-command/dashboard/heritage");
|
||||
revalidatePath("/[locale]/heritage", "layout");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: "Failed to update section." };
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteHeritageSection(id: string) {
|
||||
try {
|
||||
await prisma.heritageSection.delete({ where: { id } });
|
||||
revalidatePath("/hq-command/dashboard/heritage");
|
||||
revalidatePath("/[locale]/heritage", "layout");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: "Failed to delete section." };
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
// 🔥 Agregamos Sparkles
|
||||
import { ArrowLeft, BookOpen, Plus, Trash2, Loader2, X, Image as ImageIcon, FileText, Video, Edit3, Sparkles } from "lucide-react";
|
||||
import { getHeritageSections, createHeritageSection, updateHeritageSection, deleteHeritageSection } from "./actions";
|
||||
|
||||
export default function HeritageManager() {
|
||||
const [sections, setSections] = useState<any[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const [editingSec, setEditingSec] = useState<any | null>(null);
|
||||
const [sectionType, setSectionType] = useState("text");
|
||||
|
||||
const fetchSections = async () => {
|
||||
setIsLoading(true);
|
||||
const res = await getHeritageSections();
|
||||
if (res.success && res.sections) setSections(res.sections);
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => { fetchSections(); }, []);
|
||||
|
||||
const openCreateModal = () => {
|
||||
setEditingSec(null);
|
||||
setSectionType("text");
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const openEditModal = (sec: any) => {
|
||||
setEditingSec(sec);
|
||||
setSectionType(sec.type);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleSave = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
const formData = new FormData(e.currentTarget);
|
||||
|
||||
if (editingSec) {
|
||||
await updateHeritageSection(formData);
|
||||
} else {
|
||||
await createHeritageSection(formData);
|
||||
}
|
||||
|
||||
setIsModalOpen(false);
|
||||
fetchSections();
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (confirm("Remove this section from the Heritage page?")) {
|
||||
await deleteHeritageSection(id); fetchSections();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-6 md:p-12 max-w-7xl mx-auto">
|
||||
<div className="mb-10">
|
||||
<Link href="/hq-command/dashboard" className="inline-flex items-center gap-2 text-sm text-[#86868B] hover:text-white transition-colors mb-6 group">
|
||||
<ArrowLeft size={16} className="group-hover:-translate-x-1 transition-transform" /> Back to Command Center
|
||||
</Link>
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-light text-white flex items-center gap-3">
|
||||
<BookOpen className="text-white" /> The FLUX Heritage
|
||||
</h1>
|
||||
<p className="text-[#86868B] mt-2">Build Patrizio's deep story page block by block (Text, Images, Video).</p>
|
||||
</div>
|
||||
<button onClick={openCreateModal} className="flex items-center gap-2 bg-white text-black px-5 py-2.5 rounded-xl font-medium hover:bg-gray-200 transition-all">
|
||||
<Plus size={18} /> Add Content Block
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{isLoading ? (
|
||||
<div className="py-12 text-center text-[#86868B]"><Loader2 className="animate-spin mx-auto mb-2" size={24} /> Loading...</div>
|
||||
) : sections.length === 0 ? (
|
||||
<div className="p-12 text-center border border-white/10 rounded-3xl bg-black/20 text-[#86868B]">The Heritage page is currently empty. Add the first text block.</div>
|
||||
) : (
|
||||
sections.map((sec) => (
|
||||
<div key={sec.id} className="bg-[#111] border border-white/5 p-6 rounded-2xl flex items-start justify-between group hover:bg-white/[0.02] transition-colors shadow-lg">
|
||||
<div className="flex gap-4 w-full">
|
||||
<div className="mt-1 text-[#86868B] shrink-0">
|
||||
{sec.type === 'text' ? <FileText size={20}/> : sec.type === 'image' ? <ImageIcon size={20}/> : <Video size={20}/>}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-[10px] uppercase tracking-widest text-white/50 border border-white/10 px-2 py-0.5 rounded bg-black/40">Order: {sec.order}</span>
|
||||
<span className="text-sm font-medium text-white">{sec.title || "Untitled Block"}</span>
|
||||
</div>
|
||||
{sec.content && <p className="text-xs text-[#86868B] max-w-2xl line-clamp-2 mt-2 leading-relaxed">{sec.content}</p>}
|
||||
{sec.mediaUrl && (
|
||||
<p className="text-xs text-[#00F0FF] mt-2 font-mono">
|
||||
{sec.type === 'video' ? `/heritage/videos/${sec.mediaUrl}` : `/heritage/${sec.mediaUrl}`}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-all shrink-0 ml-4">
|
||||
<button onClick={() => openEditModal(sec)} className="text-[#86868B] hover:text-white p-2 bg-white/5 rounded-lg"><Edit3 size={16}/></button>
|
||||
<button onClick={() => handleDelete(sec.id)} className="text-[#86868B] hover:text-red-400 p-2 bg-red-500/10 rounded-lg"><Trash2 size={16}/></button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
|
||||
<div className="bg-[#111] border border-white/10 w-full max-w-xl rounded-[2rem] p-0 relative shadow-2xl flex flex-col max-h-[90vh]">
|
||||
|
||||
<div className="p-6 md:p-8 border-b border-white/10 relative shrink-0">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-white to-transparent"></div>
|
||||
<button onClick={() => setIsModalOpen(false)} className="absolute top-6 right-6 text-[#86868B] hover:text-white transition-colors"><X size={20} /></button>
|
||||
<h3 className="text-2xl font-light text-white">{editingSec ? "Edit Story Block" : "Add Story Block"}</h3>
|
||||
</div>
|
||||
|
||||
{/* 🔥 LE DAMOS UN ID AL FORMULARIO 🔥 */}
|
||||
<form id="heritage-form" onSubmit={handleSave} className="flex-1 overflow-y-auto p-6 md:p-8 space-y-5 [scrollbar-width:none]">
|
||||
<input type="hidden" name="id" value={editingSec?.id || ""} />
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Block Type</label>
|
||||
<select name="type" value={sectionType} onChange={(e) => setSectionType(e.target.value)} className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-white outline-none">
|
||||
<option value="text">📝 Text (Markdown)</option>
|
||||
<option value="image">🖼️ Large Image</option>
|
||||
<option value="video">▶️ Local Video (.mp4)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Display Order (1, 2...)</label>
|
||||
<input name="order" type="number" required defaultValue={editingSec?.order || 1} className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-white outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Title (Optional)</label>
|
||||
<input name="title" type="text" defaultValue={editingSec?.title} placeholder="e.g., The Early Days in Italy" className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-white outline-none" />
|
||||
</div>
|
||||
|
||||
{sectionType === "text" && (
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5 flex justify-between items-center">
|
||||
<span>Story Content (Markdown)</span>
|
||||
</label>
|
||||
<textarea name="content" defaultValue={editingSec?.content} required rows={10} className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-4 text-white text-sm focus:border-white outline-none resize-none leading-relaxed mb-3" placeholder="Write the history here..." />
|
||||
|
||||
<div className="bg-white/5 border border-white/10 rounded-xl p-4 text-xs text-[#86868B] font-mono leading-relaxed">
|
||||
<p className="text-white font-semibold uppercase tracking-widest mb-2 text-[10px]">Markdown Cheat Sheet:</p>
|
||||
<p><strong># Title 1</strong> | <strong>## Title 2</strong> | <strong>**Bold**</strong></p>
|
||||
<p className="mt-1"><strong>- List Item</strong> | <strong>> Blockquote</strong></p>
|
||||
<p className="mt-1 text-[#00F0FF]"><strong></strong></p>
|
||||
<div className="mt-3 pt-3 border-t border-white/10">
|
||||
<p className="mb-1"><strong>Tables (Last column highlights automatically):</strong></p>
|
||||
<p>| Year | Milestone | Innovation |</p>
|
||||
<p>|---|---|---|</p>
|
||||
<p>| 1980 | First Patent | Radiofrequency |</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sectionType !== "text" && (
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">
|
||||
{sectionType === "image" ? "Image Filename (in /public/heritage/)" : "Video Filename (in /public/heritage/videos/)"}
|
||||
</label>
|
||||
<input name="mediaUrl" type="text" defaultValue={editingSec?.mediaUrl} required placeholder={sectionType === "image" ? "e.g., patrizio-1980.jpg" : "e.g., history-1980.mp4"} className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-[#00F0FF] font-mono text-sm focus:border-white outline-none" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 🔥 SWITCH DE LA IA AÑADIDO 🔥 */}
|
||||
<div className="bg-gradient-to-r from-white/10 to-transparent border border-white/20 p-4 rounded-xl flex items-center justify-between mt-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-white/20 rounded-lg text-white"><Sparkles size={18} /></div>
|
||||
<div>
|
||||
<p className="text-sm text-white font-medium">Flux AI Auto-Translate</p>
|
||||
<p className="text-[10px] text-[#86868B] uppercase tracking-widest mt-0.5">Translates Markdown to IT, VEC, ES, DE</p>
|
||||
</div>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" name="autoTranslate" defaultChecked className="sr-only peer" />
|
||||
<div className="w-11 h-6 bg-black/50 border border-white/10 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-white"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<div className="p-6 border-t border-white/10 bg-[#111] rounded-b-[2rem] flex justify-end gap-3 shrink-0">
|
||||
<button type="button" onClick={() => setIsModalOpen(false)} className="px-5 py-3 text-sm font-medium text-[#86868B] hover:text-white transition-colors">Cancel</button>
|
||||
|
||||
{/* 🔥 APUNTAMOS AL FORMULARIO 🔥 */}
|
||||
<button onClick={() => (document.getElementById("heritage-form") as HTMLFormElement)?.requestSubmit()} disabled={isSubmitting} className="w-full md:w-auto bg-white text-black py-3 px-8 rounded-xl text-sm font-semibold hover:bg-gray-200 transition-colors disabled:opacity-50 flex justify-center items-center gap-2">
|
||||
{isSubmitting ? <Loader2 className="animate-spin mx-auto" size={18}/> : (editingSec ? "Save Changes" : "Add to Heritage Page")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,188 @@
|
||||
// /src/app/hq-command/dashboard/inbox/actions.ts
|
||||
"use server";
|
||||
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
import { sendEmail } from "@/lib/mailer";
|
||||
|
||||
// 1. GET ALL SIGNALS
|
||||
export async function getSignals() {
|
||||
try {
|
||||
const signals = await prisma.operationsSignal.findMany({
|
||||
orderBy: { createdAt: "desc" },
|
||||
});
|
||||
return { success: true, signals };
|
||||
} catch (error) {
|
||||
return { error: "Error loading Operations Inbox." };
|
||||
}
|
||||
}
|
||||
|
||||
// 2. GET ALL CLIENTS (CRM) 🔥 NUEVO
|
||||
export async function getClients() {
|
||||
try {
|
||||
const clients = await prisma.clientUser.findMany({
|
||||
include: {
|
||||
signals: {
|
||||
orderBy: { createdAt: "desc" }
|
||||
}
|
||||
},
|
||||
orderBy: { createdAt: "desc" }
|
||||
});
|
||||
return { success: true, clients };
|
||||
} catch (error) {
|
||||
return { error: "Error loading Client Directory." };
|
||||
}
|
||||
}
|
||||
|
||||
// 3. APPROVE ACCESS REQUEST 🔥 NUEVO
|
||||
export async function approveAccessRequest(signalId: string) {
|
||||
try {
|
||||
const signal = await prisma.operationsSignal.findUnique({ where: { id: signalId } });
|
||||
if (!signal || !signal.clientId) return { error: "Ticket or Client not found." };
|
||||
|
||||
// Aprobar al cliente
|
||||
await prisma.clientUser.update({
|
||||
where: { id: signal.clientId },
|
||||
data: { isApproved: true }
|
||||
});
|
||||
|
||||
// Enviar correo de Bienvenida
|
||||
const appUrl = process.env.NEXT_PUBLIC_APP_URL || "https://rf-flux.com";
|
||||
const html = `
|
||||
<div style="background-color: #F5F5F7; padding: 40px 20px; width: 100%; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
|
||||
<div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.06);">
|
||||
<div style="padding: 40px 32px 32px 32px; text-align: center; border-bottom: 1px solid #E5E5EA;">
|
||||
<img src="${appUrl}/logoEmail.png" alt="FLUX SRL" style="height: 50px; width: auto; object-fit: contain; margin-bottom: 24px;" />
|
||||
<p style="color: #10B981; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin: 0; font-weight: 700;">Account Approved</p>
|
||||
<h1 style="margin: 12px 0 16px 0; font-size: 26px; font-weight: 300; color: #1D1D1F; letter-spacing: -0.5px;">Welcome to FLUX B2B</h1>
|
||||
</div>
|
||||
<div style="padding: 32px; color: #1D1D1F; text-align: center;">
|
||||
<p style="font-size: 16px; line-height: 1.6; color: #1D1D1F; margin-bottom: 24px;">Hello <strong>${signal.clientName}</strong>,</p>
|
||||
<p style="font-size: 15px; line-height: 1.6; color: #86868B; margin-bottom: 32px;">Your corporate account for <strong>${signal.clientCompany}</strong> has been successfully verified and approved by our engineering team.</p>
|
||||
<p style="font-size: 15px; line-height: 1.6; color: #86868B; margin-bottom: 32px;">You now have full access to our exclusive Component Matrix, technical datasheets, and direct engineering support.</p>
|
||||
<a href="${appUrl}/parts" style="display: inline-block; padding: 14px 28px; background-color: #0066CC; color: #ffffff; text-decoration: none; border-radius: 12px; font-weight: 600; font-size: 14px;">Access B2B Portal</a>
|
||||
</div>
|
||||
<div style="background-color: #FAFAFA; border-top: 1px solid #E5E5EA; padding: 24px; font-size: 12px; color: #86868B; text-align: center;">
|
||||
<p style="margin: 0;">Automated by <strong>FLUX Operations Command</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const emailResult = await sendEmail({
|
||||
to: [signal.clientEmail],
|
||||
subject: "Your FLUX B2B Account is Approved",
|
||||
html,
|
||||
});
|
||||
|
||||
// Marcar ticket como resuelto
|
||||
await prisma.operationsSignal.update({
|
||||
where: { id: signalId },
|
||||
data: {
|
||||
status: "RESOLVED",
|
||||
emailSentTo: emailResult.sentTo.join(", "),
|
||||
emailSentAt: emailResult.sentAt,
|
||||
emailError: emailResult.error,
|
||||
}
|
||||
});
|
||||
|
||||
revalidatePath("/hq-command/dashboard/inbox");
|
||||
return { success: true, emailSent: emailResult.success };
|
||||
} catch (error: any) {
|
||||
return { error: "Failed to approve client." };
|
||||
}
|
||||
}
|
||||
|
||||
// 4. UPDATE STATUS
|
||||
export async function updateSignalStatus(id: string, newStatus: string) {
|
||||
try {
|
||||
await prisma.operationsSignal.update({ where: { id }, data: { status: newStatus } });
|
||||
revalidatePath("/hq-command/dashboard/inbox");
|
||||
return { success: true };
|
||||
} catch (error) { return { error: "Failed to update status." }; }
|
||||
}
|
||||
|
||||
// 5. RESOLVE & CLEAN FILES
|
||||
export async function resolveAndCleanSignal(id: string) {
|
||||
try {
|
||||
const signal = await prisma.operationsSignal.findUnique({ where: { id } });
|
||||
if (!signal) return { error: "Ticket not found." };
|
||||
let filesCleaned = false;
|
||||
if (signal.attachedFiles && signal.attachedFiles !== "[]") {
|
||||
const files = JSON.parse(signal.attachedFiles);
|
||||
if (files.length > 0) {
|
||||
const firstFileUrl = files[0];
|
||||
const parts = firstFileUrl.split('/');
|
||||
if (parts.length >= 3 && parts[1] === 'operations-inbox') {
|
||||
const folderName = parts[2];
|
||||
const dirPath = path.join(process.cwd(), "public", "operations-inbox", folderName);
|
||||
if (path.resolve(dirPath).startsWith(path.resolve(process.cwd(), "public", "operations-inbox"))) {
|
||||
if (fs.existsSync(dirPath)) { fs.rmSync(dirPath, { recursive: true, force: true }); filesCleaned = true; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
await prisma.operationsSignal.update({ where: { id }, data: { status: "RESOLVED", attachedFiles: "[]" } });
|
||||
revalidatePath("/hq-command/dashboard/inbox");
|
||||
return { success: true, filesCleaned };
|
||||
} catch (error) { return { error: "Failed to clean files." }; }
|
||||
}
|
||||
|
||||
// 6. GET/UPDATE NOTIFICATION ROUTES
|
||||
export async function getNotificationRoutes() {
|
||||
try { const routes = await prisma.notificationRoute.findMany(); return { success: true, routes }; }
|
||||
catch (error) { return { error: "Failed to load routing configurations." }; }
|
||||
}
|
||||
export async function updateNotificationRoute(routeType: string, emails: string) {
|
||||
try { await prisma.notificationRoute.upsert({ where: { routeType }, update: { emails }, create: { routeType, emails, isActive: true } }); return { success: true }; }
|
||||
catch (error) { return { error: "Failed to save email routing." }; }
|
||||
}
|
||||
|
||||
// 7. DELETE RESOLVED SIGNAL
|
||||
export async function deleteSignal(id: string) {
|
||||
try { await prisma.operationsSignal.delete({ where: { id } }); revalidatePath("/hq-command/dashboard/inbox"); return { success: true }; }
|
||||
catch (error) { return { error: "Failed to delete ticket." }; }
|
||||
}
|
||||
|
||||
// 8. RESEND SIGNAL EMAIL
|
||||
export async function resendSignalEmail(id: string) {
|
||||
try {
|
||||
const signal = await prisma.operationsSignal.findUnique({ where: { id } });
|
||||
if (!signal) return { error: "Ticket not found." };
|
||||
const route = await prisma.notificationRoute.findUnique({ where: { routeType: signal.type } });
|
||||
let targetEmails = ["info@fluxsrl.com"];
|
||||
if (route && route.isActive && route.emails) targetEmails = route.emails.split(",").map((e: any) => e.trim()).filter(Boolean);
|
||||
|
||||
// ... Lógica de HTML omitida por brevedad (Usa el mismo generador de HTML de antes)
|
||||
const appUrl = process.env.NEXT_PUBLIC_APP_URL || "https://rf-flux.com";
|
||||
const html = `... Tu HTML actual de reenvío ...`; // Usa el html que tenías en este script
|
||||
|
||||
const emailResult = await sendEmail({ to: targetEmails, subject: `[REMINDER: ${signal.type}] Signal from ${signal.clientCompany}`, html, replyTo: signal.clientEmail });
|
||||
await prisma.operationsSignal.update({ where: { id }, data: { emailSentTo: emailResult.sentTo.join(", "), emailSentAt: emailResult.sentAt, emailError: emailResult.error } });
|
||||
revalidatePath("/hq-command/dashboard/inbox");
|
||||
return { success: true, emailSent: emailResult.success, error: emailResult.error };
|
||||
} catch (error: any) { return { error: error.message || "Failed to resend email." }; }
|
||||
}
|
||||
|
||||
// 9. DELETE CLIENT (CRM)
|
||||
export async function deleteClient(id: string) {
|
||||
try {
|
||||
// Primero: Desvinculamos sus señales para no perder el historial contable/órdenes
|
||||
await prisma.operationsSignal.updateMany({
|
||||
where: { clientId: id },
|
||||
data: { clientId: null }
|
||||
});
|
||||
|
||||
// Segundo: Borramos al cliente de la base de datos
|
||||
await prisma.clientUser.delete({
|
||||
where: { id }
|
||||
});
|
||||
|
||||
revalidatePath("/hq-command/dashboard/inbox");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: "Failed to delete client." };
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,310 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
ArrowLeft, Radar, Inbox, CheckCircle2, Clock, AlertCircle,
|
||||
Package, Video, Sparkles, Building2, Mail, Phone, ShieldAlert,
|
||||
Trash2, Loader2, Settings, X, MailCheck, MailX, Users, Key
|
||||
} from "lucide-react";
|
||||
import { getSignals, updateSignalStatus, resolveAndCleanSignal, getNotificationRoutes, updateNotificationRoute, deleteSignal, resendSignalEmail, getClients, approveAccessRequest, deleteClient } from "./actions";
|
||||
|
||||
export default function OperationsInbox() {
|
||||
const [viewMode, setViewMode] = useState<"SIGNALS" | "CLIENTS">("SIGNALS");
|
||||
|
||||
const [signals, setSignals] = useState<any[]>([]);
|
||||
const [clients, setClients] = useState<any[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [activeSignal, setActiveSignal] = useState<any | null>(null);
|
||||
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
||||
const [routes, setRoutes] = useState({ ORDER: "sales@fluxsrl.com", DIAGNOSTIC: "support@fluxsrl.com", CONSULTATION: "engineering@fluxsrl.com" });
|
||||
|
||||
const [filterType, setFilterType] = useState<string>("ALL");
|
||||
const [filterStatus, setFilterStatus] = useState<string>("ALL");
|
||||
|
||||
const fetchInitialData = async () => {
|
||||
setIsLoading(true);
|
||||
const [resSignals, resRoutes, resClients] = await Promise.all([getSignals(), getNotificationRoutes(), getClients()]);
|
||||
if (resSignals.success) setSignals(resSignals.signals);
|
||||
if (resClients.success) setClients(resClients.clients);
|
||||
if (resRoutes.success && resRoutes.routes) {
|
||||
const routeMap: any = { ...routes };
|
||||
resRoutes.routes.forEach((r: any) => { routeMap[r.routeType] = r.emails; });
|
||||
setRoutes(routeMap);
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => { fetchInitialData(); }, []);
|
||||
|
||||
const handleSaveRoute = async (type: string, emails: string) => { await updateNotificationRoute(type, emails); alert(`Routing for ${type} updated.`); };
|
||||
const handleStatusChange = async (id: string, status: string) => { setIsProcessing(true); await updateSignalStatus(id, status); await fetchInitialData(); if (activeSignal?.id === id) setActiveSignal((p: any) => ({ ...p, status })); setIsProcessing(false); };
|
||||
const handleResolveAndClean = async (id: string) => { if (!confirm("Permanently delete attached files and mark as resolved?")) return; setIsProcessing(true); const res = await resolveAndCleanSignal(id); if (res.success) { await fetchInitialData(); setActiveSignal(null); } setIsProcessing(false); };
|
||||
const handleDelete = async (id: string) => { if (!confirm("Permanently delete this ticket?")) return; setIsProcessing(true); await deleteSignal(id); await fetchInitialData(); setActiveSignal(null); setIsProcessing(false); };
|
||||
const handleResendEmail = async (id: string) => { setIsProcessing(true); const res = await resendSignalEmail(id); if (res.success) { alert("Email reminder sent."); await fetchInitialData(); if (activeSignal?.id === id) setActiveSignal((p: any) => ({ ...p, emailSentAt: new Date(), emailError: null })); } else { alert("Failed: " + res.error); } setIsProcessing(false); };
|
||||
|
||||
// APROBAR CLIENTE
|
||||
const handleApproveClient = async (signalId: string) => {
|
||||
if (!confirm("Approve this client for B2B portal access? They will receive an email.")) return;
|
||||
setIsProcessing(true);
|
||||
const res = await approveAccessRequest(signalId);
|
||||
if (res.success) {
|
||||
alert("Client approved and email sent!");
|
||||
await fetchInitialData();
|
||||
setActiveSignal(null);
|
||||
} else {
|
||||
alert("Failed: " + res.error);
|
||||
}
|
||||
setIsProcessing(false);
|
||||
};
|
||||
|
||||
// BORRAR CLIENTE
|
||||
const handleDeleteClient = async (clientId: string) => {
|
||||
if (!confirm("Permanently delete this client? Their past tickets will be kept but unlinked from their account.")) return;
|
||||
setIsProcessing(true);
|
||||
const res = await deleteClient(clientId);
|
||||
if (res.success) {
|
||||
await fetchInitialData();
|
||||
} else {
|
||||
alert("Failed: " + res.error);
|
||||
}
|
||||
setIsProcessing(false);
|
||||
};
|
||||
|
||||
const parseJSON = (str: string | null) => { try { return JSON.parse(str || "[]"); } catch { return []; } };
|
||||
|
||||
const getTypeStyle = (type: string) => {
|
||||
switch (type) { case "ORDER": return "bg-amber-500/10 text-amber-400 border-amber-500/20"; case "DIAGNOSTIC": return "bg-rose-500/10 text-rose-400 border-rose-500/20"; case "CONSULTATION": return "bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20"; case "ACCESS_REQUEST": return "bg-emerald-500/10 text-emerald-400 border-emerald-500/20"; default: return "bg-white/5 text-white/70"; }
|
||||
};
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) { case "PENDING": return <AlertCircle size={14} className="text-rose-400" />; case "REVIEWING": return <Clock size={14} className="text-amber-400" />; case "RESOLVED": return <CheckCircle2 size={14} className="text-emerald-400" />; default: return null; }
|
||||
};
|
||||
|
||||
const filtered = signals.filter(s => {
|
||||
if (filterType !== "ALL" && s.type !== filterType) return false;
|
||||
if (filterStatus !== "ALL" && s.status !== filterStatus) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
const pendingCount = signals.filter(s => s.status === "PENDING").length;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-6 md:p-12 max-w-[1400px] mx-auto flex flex-col h-screen">
|
||||
<div className="mb-8 shrink-0 flex justify-between items-end">
|
||||
<div>
|
||||
<Link href="/hq-command/dashboard" className="inline-flex items-center gap-2 text-sm text-[#86868B] hover:text-rose-400 transition-colors mb-6 group"><ArrowLeft size={16} className="group-hover:-translate-x-1 transition-transform" /> Back to Command Center</Link>
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<h1 className="text-3xl font-light text-white flex items-center gap-3"><Radar className="text-rose-500" /> Hub</h1>
|
||||
<button onClick={() => setIsSettingsOpen(true)} className="p-2 bg-white/5 hover:bg-white/10 text-[#86868B] hover:text-white rounded-xl transition-all" title="Email Routing"><Settings size={20} /></button>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 p-1 bg-white/5 rounded-xl w-fit mt-4">
|
||||
<button onClick={() => setViewMode("SIGNALS")} className={`px-5 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 ${viewMode === "SIGNALS" ? "bg-white/10 text-white" : "text-[#86868B] hover:text-white"}`}><Inbox size={16}/> Operations Inbox</button>
|
||||
<button onClick={() => { setViewMode("CLIENTS"); setActiveSignal(null); }} className={`px-5 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 ${viewMode === "CLIENTS" ? "bg-white/10 text-white" : "text-[#86868B] hover:text-white"}`}><Users size={16}/> Client Directory</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-6 flex-1 min-h-0 overflow-hidden">
|
||||
|
||||
{viewMode === "SIGNALS" && (
|
||||
<>
|
||||
<div className="w-full md:w-1/3 flex flex-col bg-[#111] border border-white/5 rounded-3xl overflow-hidden shadow-2xl h-full">
|
||||
<div className="p-5 border-b border-white/10 bg-black/40 shrink-0">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-widest text-[#86868B] flex items-center gap-2"><Inbox size={16} /> Signals</h2>
|
||||
<span className="bg-rose-500 text-white text-xs font-bold px-2 py-0.5 rounded-full">{pendingCount}</span>
|
||||
</div>
|
||||
<div className="flex gap-1.5 flex-wrap">
|
||||
{["ALL", "ORDER", "DIAGNOSTIC", "CONSULTATION", "ACCESS_REQUEST"].map(t => (
|
||||
<button key={t} onClick={() => setFilterType(t)} className={`text-[9px] uppercase tracking-widest font-bold px-2 py-1 rounded-lg border transition-all ${filterType === t ? "bg-white/10 border-white/20 text-white" : "border-transparent text-[#86868B] hover:text-white"}`}>{t === "ALL" ? "All Types" : t === "ACCESS_REQUEST" ? "B2B ACCESS" : t}</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-1.5 mt-2">
|
||||
{["ALL", "PENDING", "REVIEWING", "RESOLVED"].map(s => (
|
||||
<button key={s} onClick={() => setFilterStatus(s)} className={`text-[9px] uppercase tracking-widest font-bold px-2 py-1 rounded-lg border transition-all ${filterStatus === s ? "bg-white/10 border-white/20 text-white" : "border-transparent text-[#86868B] hover:text-white"}`}>{s === "ALL" ? "All Status" : s}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto [scrollbar-width:none] p-3 space-y-2">
|
||||
{isLoading ? <div className="p-10 text-center text-[#86868B]"><Loader2 size={24} className="animate-spin mx-auto mb-2" /></div>
|
||||
: filtered.length === 0 ? <div className="p-10 text-center text-[#86868B] text-sm">No signals match filters.</div>
|
||||
: filtered.map(signal => (
|
||||
<button key={signal.id} onClick={() => setActiveSignal(signal)} className={`w-full text-left p-4 rounded-2xl border transition-all ${activeSignal?.id === signal.id ? 'bg-white/10 border-white/20' : 'bg-black/20 border-transparent hover:bg-white/5'}`}>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<span className={`text-[9px] uppercase tracking-widest font-bold px-2 py-0.5 rounded border ${getTypeStyle(signal.type)}`}>{signal.type === "ACCESS_REQUEST" ? "B2B ACCESS" : signal.type}</span>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{/* 🔥 FIX APLICADO: Título movido al <span> para evitar el error de Typescript con Lucide */}
|
||||
{signal.emailSentAt ? (
|
||||
<span title={`Email sent to ${signal.emailSentTo}`} className="flex items-center">
|
||||
<MailCheck size={11} className="text-emerald-400" />
|
||||
</span>
|
||||
) : signal.emailError ? (
|
||||
<span title={signal.emailError} className="flex items-center">
|
||||
<MailX size={11} className="text-red-400" />
|
||||
</span>
|
||||
) : null}
|
||||
{getStatusIcon(signal.status)}
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-sm font-medium text-white truncate">{signal.clientName}</h3>
|
||||
<p className="text-xs text-[#86868B] truncate">{signal.clientCompany}</p>
|
||||
<p className="text-[10px] text-[#86868B]/60 mt-2 font-mono">{signal.ticketId} · {new Date(signal.createdAt).toLocaleString()}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full md:w-2/3 bg-[#111] border border-white/5 rounded-3xl overflow-hidden shadow-2xl flex flex-col h-full relative">
|
||||
{!activeSignal ? (
|
||||
<div className="flex-1 flex flex-col items-center justify-center text-[#86868B]"><Radar size={48} className="opacity-20 mb-4" /><p>Select a signal to view details.</p></div>
|
||||
) : (
|
||||
<>
|
||||
<div className="p-6 border-b border-white/10 bg-black/40 shrink-0 flex justify-between items-center">
|
||||
<div>
|
||||
<h2 className="text-xl font-light text-white mb-1">Ticket: {activeSignal.ticketId}</h2>
|
||||
<div className="flex gap-2 items-center flex-wrap">
|
||||
<span className={`text-[10px] uppercase tracking-widest font-bold px-2 py-0.5 rounded border ${getTypeStyle(activeSignal.type)}`}>{activeSignal.type === "ACCESS_REQUEST" ? "B2B PORTAL ACCESS" : activeSignal.type}</span>
|
||||
<span className="text-xs text-[#86868B] flex items-center gap-1">{getStatusIcon(activeSignal.status)} {activeSignal.status}</span>
|
||||
{activeSignal.emailSentAt ? (
|
||||
<span className="text-[9px] text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 px-2 py-0.5 rounded flex items-center gap-1"><MailCheck size={10} /> Sent to {activeSignal.emailSentTo}</span>
|
||||
) : activeSignal.emailError ? (
|
||||
<span className="text-[9px] text-red-400 bg-red-500/10 border border-red-500/20 px-2 py-0.5 rounded flex items-center gap-1" title={activeSignal.emailError}><MailX size={10} /> Email failed</span>
|
||||
) : (
|
||||
<span className="text-[9px] text-[#86868B] bg-white/5 px-2 py-0.5 rounded">No email record</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{activeSignal.type === "ACCESS_REQUEST" && activeSignal.status === "PENDING" && (
|
||||
<button disabled={isProcessing} onClick={() => handleApproveClient(activeSignal.id)} className="px-5 py-2 bg-emerald-500 text-black hover:bg-emerald-400 text-xs font-bold uppercase tracking-wider rounded-xl flex items-center gap-2"><Key size={14}/> Approve & Notify</button>
|
||||
)}
|
||||
|
||||
{activeSignal.type !== "ACCESS_REQUEST" && <button disabled={isProcessing} onClick={() => handleResendEmail(activeSignal.id)} className="px-4 py-2 bg-[#00F0FF]/10 text-[#00F0FF] hover:bg-[#00F0FF]/20 text-xs font-semibold uppercase tracking-wider rounded-xl flex items-center gap-2"><Mail size={14} /> Resend</button>}
|
||||
{activeSignal.status === "PENDING" && <button disabled={isProcessing} onClick={() => handleStatusChange(activeSignal.id, "REVIEWING")} className="px-4 py-2 bg-amber-500/10 text-amber-500 hover:bg-amber-500/20 text-xs font-semibold uppercase tracking-wider rounded-xl">Reviewing</button>}
|
||||
{activeSignal.status !== "RESOLVED" && <button disabled={isProcessing} onClick={() => handleResolveAndClean(activeSignal.id)} className="px-4 py-2 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20 border border-emerald-500/20 text-xs font-semibold uppercase tracking-wider rounded-xl flex items-center gap-2"><ShieldAlert size={14} /> Resolve</button>}
|
||||
{activeSignal.status === "RESOLVED" && <button disabled={isProcessing} onClick={() => handleDelete(activeSignal.id)} className="px-4 py-2 bg-red-500/10 text-red-400 hover:bg-red-500/20 border border-red-500/20 text-xs font-semibold uppercase tracking-wider rounded-xl flex items-center gap-2"><Trash2 size={14} /> Delete</button>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-8 [scrollbar-width:none]">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 bg-black/20 p-5 rounded-2xl border border-white/5">
|
||||
<div className="min-w-0"><span className="text-[10px] uppercase text-[#86868B] block mb-1">Client</span><span className="text-sm text-white font-medium block truncate" title={activeSignal.clientName}>{activeSignal.clientName}</span></div>
|
||||
<div className="min-w-0"><span className="text-[10px] uppercase text-[#86868B] block mb-1 flex items-center gap-1"><Building2 size={10}/> Company</span><span className="text-sm text-white block truncate" title={activeSignal.clientCompany}>{activeSignal.clientCompany}</span></div>
|
||||
<div className="min-w-0"><span className="text-[10px] uppercase text-[#86868B] block mb-1 flex items-center gap-1"><Mail size={10}/> Email</span><a href={`mailto:${activeSignal.clientEmail}`} title={activeSignal.clientEmail} className="text-sm text-[#00F0FF] hover:underline block truncate">{activeSignal.clientEmail}</a></div>
|
||||
<div className="min-w-0"><span className="text-[10px] uppercase text-[#86868B] block mb-1 flex items-center gap-1"><Phone size={10}/> Phone</span><span className="text-sm text-white font-mono block truncate" title={activeSignal.clientPhone || "N/A"}>{activeSignal.clientPhone || "N/A"}</span></div>
|
||||
</div>
|
||||
|
||||
{activeSignal.message && <div><h3 className="text-[10px] font-bold uppercase tracking-widest text-[#86868B] mb-3 border-b border-white/10 pb-2">Notes</h3><p className="text-sm text-white/90 bg-white/5 p-4 rounded-xl border border-white/5 whitespace-pre-wrap">{activeSignal.message}</p></div>}
|
||||
|
||||
{activeSignal.aiAnalysis && <div><h3 className="text-[10px] font-bold uppercase tracking-widest text-[#00F0FF] mb-3 border-b border-[#00F0FF]/20 pb-2 flex items-center gap-2"><Sparkles size={12}/> AI Context</h3><div className="text-sm text-[#00F0FF]/90 bg-[#00F0FF]/5 p-4 rounded-xl border border-[#00F0FF]/20 whitespace-pre-wrap font-mono leading-relaxed">{activeSignal.aiAnalysis}</div></div>}
|
||||
|
||||
{activeSignal.type === "CONSULTATION" && activeSignal.aiAnalysis && (() => {
|
||||
const lines = (activeSignal.aiAnalysis || "").split("\n");
|
||||
const ext = (tag: string) => { const l = lines.find((l: string) => l.startsWith(`[${tag}]`)); return l ? l.replace(`[${tag}] `, "").trim() : null; };
|
||||
const extBlock = (tag: string) => { const si = lines.findIndex((l: string) => l.startsWith(`[${tag}]`)); if (si === -1) return []; const r: string[] = []; for (let i = si+1; i < lines.length; i++) { const l = lines[i].trim(); if (l.startsWith("[") || l === "") break; r.push(l.replace(/^[•→]\s*/, "")); } return r; };
|
||||
const industry = ext("INDUSTRY"), savings = ext("ESTIMATED SAVINGS"), volume = ext("PRODUCTION VOLUME"), preferred = ext("PREFERRED CONTACT"), timeframe = ext("TIMEFRAME");
|
||||
const insights = extBlock("AI DISCUSSION POINTS"), topics = extBlock("SUGGESTED ENGINEERING TOPICS");
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{industry && <div className="bg-[#00F0FF]/5 border border-[#00F0FF]/10 p-3 rounded-xl"><span className="text-[9px] uppercase text-[#00F0FF] block mb-1">Industry</span><span className="text-sm text-white font-medium">{industry}</span></div>}
|
||||
{savings && <div className="bg-emerald-500/5 border border-emerald-500/10 p-3 rounded-xl"><span className="text-[9px] uppercase text-emerald-400 block mb-1">Savings</span><span className="text-sm text-emerald-400 font-medium">{savings}</span></div>}
|
||||
{volume && <div className="bg-white/5 border border-white/5 p-3 rounded-xl"><span className="text-[9px] uppercase text-[#86868B] block mb-1">Volume</span><span className="text-sm text-white">{volume}</span></div>}
|
||||
{preferred && <div className="bg-white/5 border border-white/5 p-3 rounded-xl"><span className="text-[9px] uppercase text-[#86868B] block mb-1">Contact · {timeframe || ""}</span><span className="text-sm text-white">{preferred}</span></div>}
|
||||
</div>
|
||||
{insights.length > 0 && <div><h3 className="text-[10px] font-bold uppercase tracking-widest text-[#00F0FF] mb-3 border-b border-[#00F0FF]/20 pb-2 flex items-center gap-2"><Sparkles size={12}/> Discussion Points</h3><div className="space-y-2">{insights.map((item: string, i: number) => (<div key={i} className="flex items-start gap-2 bg-[#00F0FF]/5 px-4 py-2.5 rounded-xl border border-[#00F0FF]/10"><div className="w-1.5 h-1.5 rounded-full bg-[#00F0FF] mt-1.5 shrink-0" /><span className="text-sm text-white/90">{item}</span></div>))}</div></div>}
|
||||
{topics.length > 0 && <div><h3 className="text-[10px] font-bold uppercase tracking-widest text-amber-500 mb-3 border-b border-amber-500/20 pb-2 flex items-center gap-2"><Package size={12}/> Prep Topics</h3><div className="space-y-2">{topics.map((t: string, i: number) => (<div key={i} className="flex items-start gap-2 bg-amber-500/5 px-4 py-2.5 rounded-xl border border-amber-500/10"><span className="text-amber-400 font-mono text-xs mt-0.5 shrink-0">{i+1}.</span><span className="text-sm text-white/90">{t}</span></div>))}</div></div>}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{activeSignal.type === "ORDER" && (
|
||||
<div><h3 className="text-[10px] font-bold uppercase tracking-widest text-amber-500 mb-3 border-b border-amber-500/20 pb-2 flex items-center gap-2"><Package size={12}/> Requested Components</h3><div className="bg-black/40 border border-white/5 rounded-2xl overflow-hidden">{parseJSON(activeSignal.cartPayload).map((item: any, idx: number) => (<div key={idx} className="flex justify-between items-center p-4 border-b border-white/5 last:border-0"><div className="min-w-0 pr-4"><p className="text-sm font-medium text-white truncate">{item.title}</p><p className="text-[10px] font-mono text-amber-400 mt-1">SKU: {item.sku}</p></div><div className="text-right shrink-0"><span className="text-xs text-[#86868B] uppercase tracking-widest">QTY</span><p className="text-lg font-mono text-white">{item.quantity}</p></div></div>))}</div></div>
|
||||
)}
|
||||
|
||||
{parseJSON(activeSignal.attachedFiles).length > 0 && (
|
||||
<div><h3 className="text-[10px] font-bold uppercase tracking-widest text-rose-400 mb-3 border-b border-rose-500/20 pb-2 flex items-center gap-2"><Video size={12}/> Diagnostic Files</h3><div className="grid grid-cols-1 md:grid-cols-2 gap-4">{parseJSON(activeSignal.attachedFiles).map((fileUrl: string, idx: number) => { const isVideo = fileUrl.endsWith(".mp4") || fileUrl.endsWith(".mov"); return (<div key={idx} className="bg-black/60 border border-white/10 rounded-xl overflow-hidden group relative">{isVideo ? <video src={fileUrl} controls className="w-full h-48 object-cover bg-black" /> : <a href={fileUrl} target="_blank" rel="noreferrer" className="block w-full h-48"><img src={fileUrl} alt="Diagnostic" className="w-full h-full object-cover" /></a>}<div className="absolute top-2 right-2 bg-black/80 text-[9px] text-white px-2 py-1 rounded font-mono border border-white/20">{isVideo ? "VIDEO" : "IMAGE"}</div></div>); })}</div></div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{viewMode === "CLIENTS" && (
|
||||
<div className="w-full bg-[#111] border border-white/5 rounded-3xl overflow-hidden shadow-2xl flex flex-col h-full">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-white/5 text-[10px] uppercase tracking-widest text-[#86868B] bg-black/40">
|
||||
<th className="p-6 font-semibold">Client / Company</th>
|
||||
<th className="p-6 font-semibold">Email</th>
|
||||
<th className="p-6 font-semibold">Status</th>
|
||||
<th className="p-6 font-semibold text-center">Purchase History</th>
|
||||
<th className="p-6 font-semibold text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{isLoading ? <tr><td colSpan={5} className="p-12 text-center text-[#86868B]"><Loader2 className="animate-spin mx-auto mb-2" /></td></tr> :
|
||||
clients.length === 0 ? <tr><td colSpan={5} className="p-12 text-center text-[#86868B]">No clients registered yet.</td></tr> :
|
||||
clients.map(client => {
|
||||
const orders = client.signals.filter((s:any) => s.type === "ORDER");
|
||||
return (
|
||||
<tr key={client.id} className="border-b border-white/5 hover:bg-white/[0.02] transition-colors">
|
||||
<td className="p-6"><p className="text-sm font-medium text-white">{client.fullName}</p><p className="text-xs text-[#86868B] mt-1 flex items-center gap-1"><Building2 size={12}/> {client.companyName}</p></td>
|
||||
<td className="p-6 text-sm text-[#00F0FF]">{client.email}</td>
|
||||
<td className="p-6">
|
||||
{client.isApproved ? <span className="px-2 py-1 bg-emerald-500/10 text-emerald-400 text-[10px] uppercase tracking-widest font-bold rounded">Approved</span> : <span className="px-2 py-1 bg-rose-500/10 text-rose-400 text-[10px] uppercase tracking-widest font-bold rounded">Pending</span>}
|
||||
</td>
|
||||
<td className="p-6 text-center">
|
||||
<div className="text-xs text-[#86868B]">
|
||||
<span className="font-bold text-white">{orders.length}</span> Orders placed
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-6 text-right">
|
||||
<button
|
||||
disabled={isProcessing}
|
||||
onClick={() => handleDeleteClient(client.id)}
|
||||
className="p-2 text-[#86868B] hover:text-red-400 hover:bg-red-400/10 rounded-lg transition-colors"
|
||||
title="Delete Client"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
)})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
{isSettingsOpen && (
|
||||
<div className="fixed inset-0 z-[100] bg-black/80 backdrop-blur-sm flex items-center justify-center p-4">
|
||||
<div className="bg-[#111] border border-white/10 w-full max-w-lg rounded-[2rem] p-8 relative shadow-2xl">
|
||||
<button onClick={() => setIsSettingsOpen(false)} className="absolute top-6 right-6 text-[#86868B] hover:text-white"><X size={20} /></button>
|
||||
<div className="flex items-center gap-3 mb-2"><Mail className="text-rose-500" size={24} /><h3 className="text-2xl font-light text-white">Email Routing</h3></div>
|
||||
<p className="text-sm text-[#86868B] mb-6">Configure which team members receive alerts. Separate emails with commas.</p>
|
||||
<div className="space-y-5">
|
||||
{[{ id: "ORDER", label: "Spare Part Orders", color: "text-amber-500" }, { id: "DIAGNOSTIC", label: "Tech Support / Diagnostics", color: "text-rose-500" }, { id: "CONSULTATION", label: "Engineering Consultations", color: "text-[#00F0FF]" }].map(route => (
|
||||
<div key={route.id} className="bg-black/40 border border-white/5 rounded-xl p-4">
|
||||
<label className={`block text-[10px] uppercase tracking-widest font-bold mb-2 ${route.color}`}>{route.label}</label>
|
||||
<div className="flex gap-2">
|
||||
<input type="text" value={(routes as any)[route.id]} onChange={e => setRoutes({...routes, [route.id]: e.target.value})} className="flex-1 bg-transparent border-b border-white/20 text-white text-sm pb-1 outline-none focus:border-white font-mono" placeholder="e.g. sales@flux.com, ceo@flux.com" />
|
||||
<button onClick={() => handleSaveRoute(route.id, (routes as any)[route.id])} className="text-xs bg-white/10 hover:bg-white/20 text-white px-3 py-1 rounded-lg font-medium">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
//src/app/hq-command/dashboard/network/actions.ts
|
||||
"use server";
|
||||
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { revalidatePath } from "next/cache";
|
||||
|
||||
// 🔥 Importamos el motor de traducción robusto
|
||||
import { translateContentForCMS } from "@/lib/aiTranslator";
|
||||
|
||||
// 1. OBTENER TODOS LOS NODOS
|
||||
export async function getNodes() {
|
||||
try {
|
||||
const nodes = await prisma.globalNode.findMany({
|
||||
orderBy: { createdAt: "desc" }
|
||||
});
|
||||
return { success: true, nodes };
|
||||
} catch (error) {
|
||||
return { error: "Failed to fetch map nodes." };
|
||||
}
|
||||
}
|
||||
|
||||
// 2. CREAR UN NUEVO NODO
|
||||
export async function createNode(formData: FormData) {
|
||||
try {
|
||||
const title = formData.get("title") as string;
|
||||
const location = formData.get("location") as string;
|
||||
const nodeType = formData.get("nodeType") as string;
|
||||
const application = formData.get("application") as string;
|
||||
const stats = formData.get("stats") as string;
|
||||
const lat = parseFloat(formData.get("lat") as string);
|
||||
const lon = parseFloat(formData.get("lon") as string);
|
||||
|
||||
if (!title || !location || !application || !stats || isNaN(lat) || isNaN(lon) || !nodeType) {
|
||||
return { error: "All fields are required and coordinates must be valid numbers." };
|
||||
}
|
||||
|
||||
await prisma.globalNode.create({
|
||||
data: {
|
||||
title, location, nodeType, application, stats, lat, lon, isActive: true
|
||||
}
|
||||
});
|
||||
|
||||
revalidatePath("/hq-command/dashboard/network");
|
||||
revalidatePath("/[locale]", "layout");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: "Failed to create map node." };
|
||||
}
|
||||
}
|
||||
|
||||
// 3. ELIMINAR UN NODO
|
||||
export async function deleteNode(id: string) {
|
||||
try {
|
||||
await prisma.globalNode.delete({ where: { id } });
|
||||
revalidatePath("/hq-command/dashboard/network");
|
||||
revalidatePath("/[locale]", "layout");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: "Failed to delete node." };
|
||||
}
|
||||
}
|
||||
|
||||
// 4. CAMBIAR ESTADO
|
||||
export async function toggleNodeStatus(id: string, currentStatus: boolean) {
|
||||
try {
|
||||
await prisma.globalNode.update({
|
||||
where: { id },
|
||||
data: { isActive: !currentStatus }
|
||||
});
|
||||
revalidatePath("/hq-command/dashboard/network");
|
||||
revalidatePath("/[locale]", "layout");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: "Failed to update node status." };
|
||||
}
|
||||
}
|
||||
|
||||
// 5. ACTUALIZAR GEO-BLOG CON IA
|
||||
export async function updateNodeCaseStudy(formData: FormData) {
|
||||
try {
|
||||
const id = formData.get("id") as string;
|
||||
const projectOverview = formData.get("projectOverview") as string;
|
||||
const energySavings = formData.get("energySavings") as string;
|
||||
const mediaFileName = formData.get("mediaFileName") as string;
|
||||
const eventDateStr = formData.get("eventDate") as string;
|
||||
|
||||
const galleryJson = formData.get("galleryJson") as string;
|
||||
const videosJson = formData.get("videosJson") as string;
|
||||
const rendersJson = formData.get("rendersJson") as string;
|
||||
const specificDatasheetJson = formData.get("specificDatasheetJson") as string;
|
||||
const model3DPath = formData.get("model3DPath") as string;
|
||||
const model3DDimsJson = formData.get("model3DDimsJson") as string;
|
||||
|
||||
// 🔥 Atrapamos si Patrizio activó la IA 🔥
|
||||
const autoTranslate = formData.get("autoTranslate") === "on";
|
||||
|
||||
const eventDate = eventDateStr ? new Date(eventDateStr) : null;
|
||||
|
||||
let updateData: any = {
|
||||
projectOverview, energySavings, mediaFileName, eventDate,
|
||||
galleryJson: galleryJson || "[]",
|
||||
videosJson: videosJson || "[]",
|
||||
rendersJson: rendersJson || "[]",
|
||||
specificDatasheetJson: specificDatasheetJson || "[]",
|
||||
model3DPath,
|
||||
model3DDimsJson: model3DDimsJson || null
|
||||
};
|
||||
|
||||
// 🔥 LA MAGIA DE LA IA 🔥
|
||||
if (autoTranslate) {
|
||||
// Solo le pasamos a OpenAI los textos que el usuario realmente va a leer (Markdown y Métrica)
|
||||
const aiResult = await translateContentForCMS({
|
||||
projectOverview: projectOverview || "",
|
||||
energySavings: energySavings || ""
|
||||
});
|
||||
|
||||
if (aiResult) {
|
||||
updateData.translationsJson = JSON.stringify(aiResult);
|
||||
}
|
||||
}
|
||||
|
||||
await prisma.globalNode.update({ where: { id }, data: updateData });
|
||||
|
||||
revalidatePath("/hq-command/dashboard/network");
|
||||
revalidatePath("/[locale]", "layout");
|
||||
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error("Error updating chronicle:", error);
|
||||
return { error: "Failed to update case study data." };
|
||||
}
|
||||
}
|
||||
|
||||
// 6. BÚSQUEDA SATELITAL
|
||||
export async function searchSatelliteLocation(query: string) {
|
||||
try {
|
||||
const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&featuretype=city&limit=5`, {
|
||||
headers: { 'User-Agent': 'FluxCMS-Architecture/1.0 (davidherran@dreamhousestudios.co)' }
|
||||
});
|
||||
if (!res.ok) throw new Error("Satellite rejected request");
|
||||
const data = await res.json();
|
||||
return { success: true, data };
|
||||
} catch (error) {
|
||||
console.error("Satellite search failed:", error);
|
||||
return { error: "Satellite connection failed" };
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,720 @@
|
||||
//src/app/hq-command/dashboard/network/page.tsx
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
ArrowLeft, Globe, Plus, Trash2, Loader2, X, MapPin, Eye, EyeOff, Search, BookOpen, Calendar,
|
||||
Image as ImageIcon, Video, Box, Cpu, FileText, Sparkles,
|
||||
Bold, Italic, Heading1, Heading2, Heading3, List, ListOrdered, Quote, Table, Minus,
|
||||
RotateCcw, RotateCw, Maximize2, Minimize2, ChevronDown,
|
||||
FolderOpen, Upload, FolderPlus, ChevronRight, File, ArrowUpFromLine,
|
||||
Grid3X3, LayoutList, Copy, Check
|
||||
} from "lucide-react";
|
||||
import { getNodes, createNode, deleteNode, toggleNodeStatus, updateNodeCaseStudy, searchSatelliteLocation } from "./actions";
|
||||
import { getApplications } from "../applications/actions";
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// ASSET MANAGER — Reusable file browser for /public/cases/{slug}/
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
interface AssetItem {
|
||||
name: string; type: "file" | "folder"; mediaType?: string; extension?: string;
|
||||
path: string; publicUrl?: string; size?: string; childCount?: number;
|
||||
}
|
||||
|
||||
interface AssetManagerProps {
|
||||
slug: string;
|
||||
scope?: string;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSelect: (item: { name: string; publicUrl: string; mediaType: string; path: string }) => void;
|
||||
accentColor?: string;
|
||||
initialPath?: string;
|
||||
}
|
||||
|
||||
function AssetManager({ slug, scope = "cases", isOpen, onClose, onSelect, accentColor = "#00F0FF", initialPath = "" }: AssetManagerProps) {
|
||||
const [currentPath, setCurrentPath] = useState(initialPath);
|
||||
const [items, setItems] = useState<AssetItem[]>([]);
|
||||
const [breadcrumbs, setBreadcrumbs] = useState<{name: string; path: string}[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [uploadProgress, setUploadProgress] = useState("");
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [showNewFolder, setShowNewFolder] = useState(false);
|
||||
const [newFolderName, setNewFolderName] = useState("");
|
||||
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [copiedPath, setCopiedPath] = useState<string | null>(null);
|
||||
|
||||
const fetchAssets = useCallback(async (dirPath: string = "") => {
|
||||
setIsLoading(true); setError(null);
|
||||
try {
|
||||
const params = new URLSearchParams({ scope, slug, path: dirPath });
|
||||
const res = await fetch(`/api/assets?${params}`);
|
||||
const data = await res.json();
|
||||
if (data.success) { setItems(data.items); setBreadcrumbs(data.breadcrumbs); setCurrentPath(dirPath); }
|
||||
else setError(data.error || "Failed to load");
|
||||
} catch { setError("Connection error — check /api/assets/route.ts"); }
|
||||
setIsLoading(false);
|
||||
}, [scope, slug]);
|
||||
|
||||
useEffect(() => { if (isOpen) { fetchAssets(initialPath || currentPath); setSearchQuery(""); } }, [isOpen]); // eslint-disable-line
|
||||
|
||||
const uploadFile = async (file: File) => {
|
||||
setIsUploading(true); setUploadProgress(`Uploading ${file.name}...`);
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append("scope", scope); fd.append("slug", slug); fd.append("path", currentPath); fd.append("file", file);
|
||||
const res = await fetch("/api/assets", { method: "POST", body: fd });
|
||||
const data = await res.json();
|
||||
if (data.success) { setUploadProgress("✓ " + data.file.name); await fetchAssets(currentPath); setTimeout(() => setUploadProgress(""), 2000); }
|
||||
else { setUploadProgress("✗ " + data.error); setTimeout(() => setUploadProgress(""), 4000); }
|
||||
} catch { setUploadProgress("✗ Failed"); setTimeout(() => setUploadProgress(""), 3000); }
|
||||
setIsUploading(false);
|
||||
};
|
||||
|
||||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => { if (e.target.files) Array.from(e.target.files).forEach(uploadFile); e.target.value = ""; };
|
||||
const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(true); };
|
||||
const handleDragLeave = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(false); };
|
||||
const handleDrop = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(false); if (e.dataTransfer.files.length > 0) Array.from(e.dataTransfer.files).forEach(uploadFile); };
|
||||
|
||||
const createFolder = async () => {
|
||||
if (!newFolderName.trim()) return;
|
||||
try {
|
||||
const res = await fetch("/api/assets", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ scope, slug, folderName: newFolderName, parentPath: currentPath }) });
|
||||
const data = await res.json();
|
||||
if (data.success) { setShowNewFolder(false); setNewFolderName(""); await fetchAssets(currentPath); }
|
||||
else alert(data.error);
|
||||
} catch { alert("Connection error"); }
|
||||
};
|
||||
|
||||
const deleteFile = async (filePath: string, fileName: string) => {
|
||||
if (!confirm('Delete "' + fileName + '"?')) return;
|
||||
try {
|
||||
const res = await fetch("/api/assets", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ scope, slug, filePath }) });
|
||||
const data = await res.json(); if (data.success) await fetchAssets(currentPath); else alert(data.error);
|
||||
} catch { alert("Failed to delete"); }
|
||||
};
|
||||
|
||||
const handleSelect = (item: AssetItem, e?: React.MouseEvent) => {
|
||||
if (e) { e.preventDefault(); e.stopPropagation(); }
|
||||
if (item.type === "folder") { fetchAssets(item.path); return; }
|
||||
onSelect({ name: item.name, publicUrl: item.publicUrl || "/" + scope + "/" + slug + "/" + item.path, mediaType: item.mediaType || "unknown", path: item.path });
|
||||
onClose();
|
||||
};
|
||||
|
||||
const copyPath = (item: AssetItem) => {
|
||||
navigator.clipboard.writeText(item.publicUrl || "/" + scope + "/" + slug + "/" + item.path);
|
||||
setCopiedPath(item.path); setTimeout(() => setCopiedPath(null), 1500);
|
||||
};
|
||||
|
||||
const filtered = searchQuery ? items.filter(i => i.name.toLowerCase().includes(searchQuery.toLowerCase())) : items;
|
||||
|
||||
const typeBadge = (mt?: string) => {
|
||||
const s: Record<string, string> = { image: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20", video: "bg-blue-500/10 text-blue-400 border-blue-500/20", model: "bg-purple-500/10 text-purple-400 border-purple-500/20" };
|
||||
return s[mt || ""] || "bg-white/5 text-[#86868B] border-white/10";
|
||||
};
|
||||
|
||||
const renderThumb = (item: AssetItem) => {
|
||||
if (item.type === "folder") return <div className="w-full h-full flex items-center justify-center bg-white/[0.02]"><FolderOpen size={28} style={{ color: accentColor, opacity: 0.7 }} /></div>;
|
||||
if (item.mediaType === "image" && item.publicUrl) return <img src={item.publicUrl} alt={item.name} className="w-full h-full object-cover" loading="lazy" />;
|
||||
if (item.mediaType === "video") return <div className="w-full h-full flex items-center justify-center bg-blue-500/5"><Video size={24} className="text-blue-400/60" /></div>;
|
||||
if (item.mediaType === "model") return <div className="w-full h-full flex items-center justify-center bg-purple-500/5"><Box size={24} className="text-purple-400/60" /></div>;
|
||||
return <div className="w-full h-full flex items-center justify-center bg-white/[0.02]"><File size={24} className="text-[#86868B]/50" /></div>;
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[70] flex items-center justify-center p-4 bg-black/85 backdrop-blur-md" onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
|
||||
<div className="bg-[#0D0D0D] border border-white/10 w-full max-w-4xl rounded-[2rem] shadow-2xl flex flex-col max-h-[85vh] relative overflow-hidden" onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop} onClick={(e) => e.stopPropagation()}>
|
||||
{isDragging && (
|
||||
<div className="absolute inset-0 z-50 border-2 border-dashed rounded-[2rem] flex items-center justify-center backdrop-blur-sm" style={{ borderColor: accentColor + "80", background: accentColor + "15" }}>
|
||||
<div className="text-center">
|
||||
<ArrowUpFromLine size={48} style={{ color: accentColor }} className="mx-auto mb-3 animate-bounce" />
|
||||
<p style={{ color: accentColor }} className="font-medium text-lg">Drop files to upload</p>
|
||||
<p className="text-[#86868B] text-sm mt-1">to /{scope}/{slug}/{currentPath || "root"}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="px-6 py-5 border-b border-white/10 shrink-0">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-xl" style={{ background: accentColor + "20", color: accentColor }}><FolderOpen size={20} /></div>
|
||||
<div><h3 className="text-lg font-medium text-white">Asset Manager</h3><p className="text-[10px] text-[#86868B] uppercase tracking-widest font-mono">/public/{scope}/{slug}/</p></div>
|
||||
</div>
|
||||
<button onClick={onClose} className="text-[#86868B] hover:text-white p-2 hover:bg-white/5 rounded-xl transition-all"><X size={20} /></button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-1 text-sm overflow-x-auto [scrollbar-width:none] flex-1 min-w-0">
|
||||
{breadcrumbs.map((crumb, idx) => (
|
||||
<span key={idx} className="flex items-center shrink-0">
|
||||
{idx > 0 && <ChevronRight size={12} className="text-[#86868B]/50 mx-0.5" />}
|
||||
<button onClick={() => fetchAssets(crumb.path)} className={`px-2 py-1 rounded-lg transition-colors text-xs ${idx === breadcrumbs.length - 1 ? "bg-white/10" : "text-[#86868B] hover:text-white hover:bg-white/5"}`} style={idx === breadcrumbs.length - 1 ? { color: accentColor } : {}}>{crumb.name}</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<div className="relative"><Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[#86868B]" /><input value={searchQuery} onChange={e => setSearchQuery(e.target.value)} placeholder="Filter..." className="bg-white/5 border border-white/10 rounded-lg pl-8 pr-3 py-1.5 text-xs text-white w-32 focus:w-48 transition-all outline-none" /></div>
|
||||
<div className="flex bg-white/5 rounded-lg border border-white/10 overflow-hidden">
|
||||
<button onClick={() => setViewMode("grid")} className={`p-1.5 transition-colors ${viewMode === "grid" ? "text-[#00F0FF] bg-white/10" : "text-[#86868B]"}`}><Grid3X3 size={14} /></button>
|
||||
<button onClick={() => setViewMode("list")} className={`p-1.5 transition-colors ${viewMode === "list" ? "text-[#00F0FF] bg-white/10" : "text-[#86868B]"}`}><LayoutList size={14} /></button>
|
||||
</div>
|
||||
<button onClick={() => setShowNewFolder(!showNewFolder)} className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-[#86868B] hover:text-white bg-white/5 border border-white/10 rounded-lg"><FolderPlus size={13} /> Folder</button>
|
||||
<button onClick={() => fileInputRef.current?.click()} disabled={isUploading} className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-black rounded-lg font-medium disabled:opacity-50" style={{ background: accentColor }}><Upload size={13} /> Upload</button>
|
||||
<input ref={fileInputRef} type="file" multiple accept=".jpg,.jpeg,.png,.webp,.gif,.svg,.avif,.mp4,.webm,.mov,.glb,.gltf,.usdz,.pdf" onChange={handleFileSelect} className="hidden" />
|
||||
</div>
|
||||
</div>
|
||||
{showNewFolder && (
|
||||
<div className="flex items-center gap-2 mt-3 pt-3 border-t border-white/5">
|
||||
<FolderPlus size={14} style={{ color: accentColor }} />
|
||||
<input value={newFolderName} onChange={e => setNewFolderName(e.target.value)} onKeyDown={e => { if (e.key === "Enter") createFolder(); if (e.key === "Escape") { setShowNewFolder(false); setNewFolderName(""); } }} placeholder="folder-name" autoFocus className="flex-1 bg-black/40 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-white outline-none font-mono" />
|
||||
<button onClick={createFolder} className="px-3 py-1.5 text-xs text-black rounded-lg font-medium" style={{ background: accentColor }}>Create</button>
|
||||
<button onClick={() => { setShowNewFolder(false); setNewFolderName(""); }} className="px-3 py-1.5 text-xs text-[#86868B]">Cancel</button>
|
||||
</div>
|
||||
)}
|
||||
{uploadProgress && <div className="mt-3 pt-3 border-t border-white/5 flex items-center gap-2 text-xs">{isUploading && <Loader2 size={12} className="animate-spin" style={{ color: accentColor }} />}<span className={uploadProgress.startsWith("✓") ? "text-emerald-400" : uploadProgress.startsWith("✗") ? "text-red-400" : ""} style={isUploading ? { color: accentColor } : {}}>{uploadProgress}</span></div>}
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-4 [scrollbar-width:none]">
|
||||
{isLoading ? <div className="flex items-center justify-center py-20"><Loader2 size={24} className="animate-spin" style={{ color: accentColor }} /></div>
|
||||
: error ? <div className="flex flex-col items-center justify-center py-20 text-center"><X size={32} className="text-red-400/50 mb-3" /><p className="text-red-400/80 text-sm">{error}</p></div>
|
||||
: filtered.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center">
|
||||
<FolderOpen size={48} className="text-[#86868B]/20 mb-4" />
|
||||
{searchQuery ? <p className="text-[#86868B] text-sm">No matches</p> : (
|
||||
<><p className="text-[#86868B] text-sm mb-2">Empty directory</p>
|
||||
<div className="flex gap-2 mt-4">{["images", "videos", "models", "renders"].map(f => (
|
||||
<button key={f} onClick={async () => { await fetch("/api/assets", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ scope, slug, folderName: f, parentPath: currentPath }) }); fetchAssets(currentPath); }} className="px-3 py-2 text-xs border rounded-lg" style={{ color: accentColor, borderColor: accentColor + "30" }}>+ {f}/</button>
|
||||
))}</div></>
|
||||
)}
|
||||
</div>
|
||||
) : viewMode === "grid" ? (
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-3">
|
||||
{filtered.map(item => (
|
||||
<div key={item.path} className="group relative bg-[#111] border border-white/5 rounded-xl overflow-hidden hover:border-white/20 transition-all cursor-pointer" onClick={(e) => handleSelect(item, e)}>
|
||||
<div className="aspect-square overflow-hidden bg-black/20">{renderThumb(item)}</div>
|
||||
<div className="p-2"><p className="text-[11px] text-white truncate font-medium">{item.name}</p>
|
||||
<div className="flex items-center justify-between mt-1">
|
||||
{item.type === "folder" ? <span className="text-[9px] text-[#86868B]">{item.childCount} items</span> : <span className={`text-[9px] px-1.5 py-0.5 rounded border ${typeBadge(item.mediaType)}`}>{item.mediaType}</span>}
|
||||
{item.size && <span className="text-[9px] text-[#86868B]">{item.size}</span>}
|
||||
</div>
|
||||
</div>
|
||||
{item.type === "file" && <div className="absolute top-1 right-1 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity"><button onClick={e => { e.stopPropagation(); copyPath(item); }} className="p-1.5 bg-black/70 backdrop-blur-sm rounded-lg text-[#86868B] hover:text-white">{copiedPath === item.path ? <Check size={11} className="text-emerald-400" /> : <Copy size={11} />}</button><button onClick={e => { e.stopPropagation(); deleteFile(item.path, item.name); }} className="p-1.5 bg-black/70 backdrop-blur-sm rounded-lg text-[#86868B] hover:text-red-400"><Trash2 size={11} /></button></div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">{filtered.map(item => (
|
||||
<div key={item.path} className="group flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-white/[0.03] cursor-pointer" onClick={(e) => handleSelect(item, e)}>
|
||||
<div className="w-8 h-8 rounded-lg overflow-hidden shrink-0 border border-white/5">{renderThumb(item)}</div>
|
||||
<span className="text-sm text-white flex-1 truncate">{item.name}</span>
|
||||
{item.type === "file" && <span className={`text-[9px] px-2 py-0.5 rounded border shrink-0 ${typeBadge(item.mediaType)}`}>{item.extension}</span>}
|
||||
{item.type === "folder" && <><span className="text-[9px] text-[#86868B]">{item.childCount} items</span><ChevronRight size={14} className="text-[#86868B]/50" /></>}
|
||||
{item.size && <span className="text-[10px] text-[#86868B] w-16 text-right shrink-0">{item.size}</span>}
|
||||
</div>
|
||||
))}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="px-6 py-3 border-t border-white/10 flex items-center justify-between text-[10px] text-[#86868B] shrink-0 bg-black/20"><span>{filtered.length} items • Click to select</span><span className="font-mono">Drag & drop supported</span></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// MARKDOWN EDITOR — Cyan-themed for Network/Cases
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
function MarkdownEditorCyan({ name, defaultValue = "", required, rows = 10, placeholder, slug }: {
|
||||
name: string; defaultValue?: string; required?: boolean; rows?: number; placeholder?: string; slug?: string;
|
||||
}) {
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const [value, setValue] = useState(defaultValue);
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [showInsertMenu, setShowInsertMenu] = useState(false);
|
||||
const [history, setHistory] = useState<string[]>([defaultValue]);
|
||||
const [historyIndex, setHistoryIndex] = useState(0);
|
||||
const insertMenuRef = useRef<HTMLDivElement>(null);
|
||||
const [isAssetManagerOpen, setIsAssetManagerOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const h = (e: MouseEvent) => { if (insertMenuRef.current && !insertMenuRef.current.contains(e.target as Node)) setShowInsertMenu(false); };
|
||||
document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h);
|
||||
}, []);
|
||||
|
||||
const historyTimeout = useRef<NodeJS.Timeout | null>(null);
|
||||
const pushHistory = useCallback((v: string) => {
|
||||
if (historyTimeout.current) clearTimeout(historyTimeout.current);
|
||||
historyTimeout.current = setTimeout(() => { setHistory(p => [...p.slice(0, historyIndex + 1), v].slice(-50)); setHistoryIndex(p => Math.min(p + 1, 49)); }, 500);
|
||||
}, [historyIndex]);
|
||||
|
||||
const handleChange = (v: string) => { setValue(v); pushHistory(v); };
|
||||
const undo = () => { if (historyIndex > 0) { const i = historyIndex - 1; setHistoryIndex(i); setValue(history[i]); } };
|
||||
const redo = () => { if (historyIndex < history.length - 1) { const i = historyIndex + 1; setHistoryIndex(i); setValue(history[i]); } };
|
||||
|
||||
const getSelection = () => {
|
||||
const ta = textareaRef.current;
|
||||
if (!ta) return { start: 0, end: 0, selected: "", before: "", after: "" };
|
||||
return { start: ta.selectionStart, end: ta.selectionEnd, selected: value.substring(ta.selectionStart, ta.selectionEnd), before: value.substring(0, ta.selectionStart), after: value.substring(ta.selectionEnd) };
|
||||
};
|
||||
const replaceSelection = (t: string, o?: number) => {
|
||||
const { before, after } = getSelection();
|
||||
handleChange(before + t + after);
|
||||
const p = o !== undefined ? before.length + o : before.length + t.length;
|
||||
setTimeout(() => { const ta = textareaRef.current; if (ta) { ta.focus(); ta.setSelectionRange(p, p); } }, 0);
|
||||
};
|
||||
const wrapSelection = (pre: string, suf: string) => { const { selected } = getSelection(); if (selected) replaceSelection(pre + selected + suf); else replaceSelection(pre + "text" + suf, pre.length); };
|
||||
const insertAtCursor = (t: string, o?: number) => replaceSelection(t, o);
|
||||
const prependLine = (pre: string) => {
|
||||
const { start, selected } = getSelection();
|
||||
const ls = value.lastIndexOf('\n', start - 1) + 1;
|
||||
const bef = value.substring(0, ls);
|
||||
const line = selected || value.substring(ls).split('\n')[0];
|
||||
const aft = value.substring(ls + line.length);
|
||||
handleChange(bef + pre + line + aft);
|
||||
setTimeout(() => { const ta = textareaRef.current; if (ta) { ta.focus(); ta.setSelectionRange(ls + pre.length, ls + pre.length + line.length); } }, 0);
|
||||
};
|
||||
|
||||
const handleAssetInsert = (item: { publicUrl: string; mediaType: string; name: string }) => {
|
||||
let syntax = "";
|
||||
switch (item.mediaType) {
|
||||
case "image": syntax = "![" + item.name + "](" + item.publicUrl + ")"; break;
|
||||
case "video": syntax = "[VIDEO:" + item.publicUrl + "]"; break;
|
||||
case "model": syntax = "[3D:" + item.publicUrl + "]"; break;
|
||||
default: syntax = "[" + item.name + "](" + item.publicUrl + ")";
|
||||
}
|
||||
insertAtCursor("\n" + syntax + "\n");
|
||||
};
|
||||
|
||||
const basePath = "/cases/" + (slug || "slug");
|
||||
const actions = {
|
||||
bold: () => wrapSelection("**", "**"), italic: () => wrapSelection("*", "*"),
|
||||
h1: () => prependLine("# "), h2: () => prependLine("## "), h3: () => prependLine("### "),
|
||||
quote: () => prependLine("> "),
|
||||
ul: () => insertAtCursor("\n- Item 1\n- Item 2\n- Item 3\n", 3),
|
||||
ol: () => insertAtCursor("\n1. First\n2. Second\n3. Third\n", 4),
|
||||
hr: () => insertAtCursor("\n---\n"),
|
||||
table: () => insertAtCursor("\n| Column A | Column B | Highlight |\n|---|---|---|\n| Data 1 | Data 2 | Value |\n", 2),
|
||||
image: () => insertAtCursor("\n![Image description](" + basePath + "/images/photo.jpg)\n", 3),
|
||||
video: () => insertAtCursor("\n[VIDEO:" + basePath + "/videos/clip.mp4]\n", 8),
|
||||
model3d: () => insertAtCursor("\n[3D:" + basePath + "/models/machine.glb]\n", 5),
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
const m = e.metaKey || e.ctrlKey;
|
||||
if (m && e.key === 'b') { e.preventDefault(); actions.bold(); }
|
||||
if (m && e.key === 'i') { e.preventDefault(); actions.italic(); }
|
||||
if (m && e.key === 'z') { e.preventDefault(); e.shiftKey ? redo() : undo(); }
|
||||
if (e.key === 'Tab') { e.preventDefault(); insertAtCursor(" "); }
|
||||
};
|
||||
|
||||
const ToolBtn = ({ icon: Icon, label, onClick, className = "" }: { icon: any; label: string; onClick: () => void; className?: string }) => (
|
||||
<button type="button" onClick={onClick} title={label} className={"p-1.5 rounded-lg text-[#86868B] hover:text-white hover:bg-white/10 transition-all active:scale-90 " + className}><Icon size={15} strokeWidth={2} /></button>
|
||||
);
|
||||
const Divider = () => <div className="w-px h-5 bg-white/10 mx-1" />;
|
||||
|
||||
return (
|
||||
<div className={"flex flex-col " + (isExpanded ? "fixed inset-0 z-[60] bg-[#0A0A0A] p-6" : "")}>
|
||||
<input type="hidden" name={name} value={value} />
|
||||
<div className={"flex flex-wrap items-center gap-0.5 px-2 py-1.5 bg-black/60 border border-white/10 rounded-t-xl " + (isExpanded ? "border-b-0 rounded-t-2xl" : "")}>
|
||||
<ToolBtn icon={Bold} label="Bold" onClick={actions.bold} />
|
||||
<ToolBtn icon={Italic} label="Italic" onClick={actions.italic} />
|
||||
<Divider />
|
||||
<ToolBtn icon={Heading1} label="H1" onClick={actions.h1} />
|
||||
<ToolBtn icon={Heading2} label="H2" onClick={actions.h2} />
|
||||
<ToolBtn icon={Heading3} label="H3" onClick={actions.h3} />
|
||||
<Divider />
|
||||
<ToolBtn icon={List} label="Bullet" onClick={actions.ul} />
|
||||
<ToolBtn icon={ListOrdered} label="Numbered" onClick={actions.ol} />
|
||||
<ToolBtn icon={Quote} label="Quote" onClick={actions.quote} />
|
||||
<ToolBtn icon={Table} label="Table" onClick={actions.table} />
|
||||
<ToolBtn icon={Minus} label="HR" onClick={actions.hr} />
|
||||
<Divider />
|
||||
<div className="relative" ref={insertMenuRef}>
|
||||
<button type="button" onClick={() => setShowInsertMenu(!showInsertMenu)} className="flex items-center gap-1 px-2 py-1.5 rounded-lg text-[#00F0FF] hover:bg-[#00F0FF]/10 transition-all text-[11px] font-semibold uppercase tracking-wider">
|
||||
<Plus size={13} /> Insert <ChevronDown size={11} className={"transition-transform " + (showInsertMenu ? "rotate-180" : "")} />
|
||||
</button>
|
||||
{showInsertMenu && (
|
||||
<div className="absolute top-full left-0 mt-1 w-56 bg-[#1A1A1A] border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden">
|
||||
<div className="p-1">
|
||||
<button type="button" onClick={() => { actions.image(); setShowInsertMenu(false); }} className="w-full flex items-center gap-3 px-3 py-2.5 text-white/80 hover:text-white hover:bg-white/5 rounded-lg text-left"><div className="p-1.5 bg-emerald-500/15 rounded-lg text-emerald-400"><ImageIcon size={14} /></div><div><p className="text-xs font-medium">Image</p><p className="text-[10px] text-[#86868B]">.jpg .png .webp</p></div></button>
|
||||
<button type="button" onClick={() => { actions.video(); setShowInsertMenu(false); }} className="w-full flex items-center gap-3 px-3 py-2.5 text-white/80 hover:text-white hover:bg-white/5 rounded-lg text-left"><div className="p-1.5 bg-blue-500/15 rounded-lg text-blue-400"><Video size={14} /></div><div><p className="text-xs font-medium">Video</p><p className="text-[10px] text-[#86868B]">.mp4 local</p></div></button>
|
||||
<button type="button" onClick={() => { actions.model3d(); setShowInsertMenu(false); }} className="w-full flex items-center gap-3 px-3 py-2.5 text-white/80 hover:text-white hover:bg-white/5 rounded-lg text-left"><div className="p-1.5 bg-purple-500/15 rounded-lg text-purple-400"><Box size={14} /></div><div><p className="text-xs font-medium">3D Model</p><p className="text-[10px] text-[#86868B]">.glb / .usdz</p></div></button>
|
||||
<div className="border-t border-white/5 mt-1 pt-1">
|
||||
<button type="button" onClick={() => { actions.table(); setShowInsertMenu(false); }} className="w-full flex items-center gap-3 px-3 py-2.5 text-white/80 hover:text-white hover:bg-white/5 rounded-lg text-left"><div className="p-1.5 bg-amber-500/15 rounded-lg text-amber-400"><Table size={14} /></div><div><p className="text-xs font-medium">Data Table</p><p className="text-[10px] text-[#86868B]">Auto-highlight</p></div></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{slug && (<><Divider /><button type="button" onClick={() => setIsAssetManagerOpen(true)} className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10 transition-all text-[11px] font-semibold uppercase tracking-wider"><FolderOpen size={14} /> Assets</button></>)}
|
||||
<div className="flex-1" />
|
||||
<ToolBtn icon={RotateCcw} label="Undo" onClick={undo} className={historyIndex <= 0 ? "opacity-30 pointer-events-none" : ""} />
|
||||
<ToolBtn icon={RotateCw} label="Redo" onClick={redo} className={historyIndex >= history.length - 1 ? "opacity-30 pointer-events-none" : ""} />
|
||||
<Divider />
|
||||
<ToolBtn icon={isExpanded ? Minimize2 : Maximize2} label="Fullscreen" onClick={() => setIsExpanded(!isExpanded)} />
|
||||
</div>
|
||||
<textarea ref={textareaRef} value={value} onChange={e => handleChange(e.target.value)} onKeyDown={handleKeyDown} required={required} rows={isExpanded ? 40 : rows} placeholder={placeholder} className={"w-full bg-black/40 border border-white/10 border-t-0 p-4 text-white font-mono text-sm focus:border-[#00F0FF] outline-none resize-none leading-relaxed " + (isExpanded ? "flex-1 rounded-b-2xl text-base leading-loose" : "rounded-b-xl")} style={{ tabSize: 2 }} />
|
||||
<div className="flex items-center justify-between mt-1.5 px-1">
|
||||
<div className="flex items-center gap-3 text-[10px] text-[#86868B] font-mono"><span>{value.split('\n').length} lines</span><span className="text-white/10">|</span><span>{value.length} chars</span></div>
|
||||
<div className="flex items-center gap-2 text-[10px] text-[#86868B]"><span className="opacity-60">⌘B</span><span className="opacity-60">⌘I</span><span className="opacity-60">Tab</span></div>
|
||||
</div>
|
||||
{!isExpanded && (
|
||||
<div className="bg-[#00F0FF]/5 border border-[#00F0FF]/20 rounded-xl p-4 text-xs text-[#86868B] font-mono leading-relaxed mt-3">
|
||||
<p className="text-[#00F0FF] font-semibold uppercase tracking-widest mb-2 text-[10px]">Markdown Cheat Sheet:</p>
|
||||
<p><strong># Title 1</strong> | <strong>## Title 2</strong> | <strong>**Bold**</strong></p>
|
||||
<p className="mt-1"><strong>- List Item</strong> | <strong>> Blockquote</strong></p>
|
||||
<p className="mt-1 text-white"><strong>![Image](/cases/{slug || "slug"}/images/photo.jpg)</strong></p>
|
||||
</div>
|
||||
)}
|
||||
{slug && <AssetManager scope="cases" slug={slug} isOpen={isAssetManagerOpen} onClose={() => setIsAssetManagerOpen(false)} onSelect={handleAssetInsert} accentColor="#00F0FF" />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// MAIN PAGE — Network Manager (Global Network)
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function NetworkManager() {
|
||||
const [nodes, setNodes] = useState<any[]>([]);
|
||||
const [appsList, setAppsList] = useState<any[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [createNodeType, setCreateNodeType] = useState("installation");
|
||||
const [editingNode, setEditingNode] = useState<any | null>(null);
|
||||
const [isSavingCaseStudy, setIsSavingCaseStudy] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState<"story" | "tech" | "media" | "3d">("story");
|
||||
const [gallery, setGallery] = useState<string[]>([]);
|
||||
const [videos, setVideos] = useState<string[]>([]);
|
||||
const [renders, setRenders] = useState<string[]>([]);
|
||||
const [datasheet, setDatasheet] = useState<{model?: string, specs?: any[]}>({});
|
||||
const [eventDate, setEventDate] = useState("");
|
||||
const [model3DDims, setModel3DDims] = useState<{w?:string,h?:string,d?:string,unit?:string,weight?:string}>({});
|
||||
const [locationQuery, setLocationQuery] = useState("");
|
||||
const [searchResults, setSearchResults] = useState<any[]>([]);
|
||||
const [isSearchingMap, setIsSearchingMap] = useState(false);
|
||||
const [showResults, setShowResults] = useState(false);
|
||||
const [selectedLat, setSelectedLat] = useState("");
|
||||
const [selectedLon, setSelectedLon] = useState("");
|
||||
const [mediaAssetsOpen, setMediaAssetsOpen] = useState(false);
|
||||
const [threeDAssetsOpen, setThreeDAssetsOpen] = useState(false);
|
||||
const [mediaAssetTarget, setMediaAssetTarget] = useState<"video" | "image">("video");
|
||||
const [threeDAssetTarget, setThreeDAssetTarget] = useState<"model" | "render">("model");
|
||||
const [coverAssetsOpen, setCoverAssetsOpen] = useState(false);
|
||||
|
||||
const nodeSlug = editingNode?.title?.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, '') || "untitled";
|
||||
|
||||
const fetchNodesAndApps = async () => {
|
||||
setIsLoading(true);
|
||||
const resNodes = await getNodes(); if (resNodes.success && resNodes.nodes) setNodes(resNodes.nodes);
|
||||
const resApps = await getApplications(); if (resApps.success && resApps.apps) setAppsList(resApps.apps);
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => { fetchNodesAndApps(); }, []);
|
||||
|
||||
useEffect(() => {
|
||||
const t = setTimeout(async () => {
|
||||
if (locationQuery.length > 2 && showResults) {
|
||||
setIsSearchingMap(true);
|
||||
const res = await searchSatelliteLocation(locationQuery);
|
||||
if (res.success && res.data) setSearchResults(res.data); else setSearchResults([]);
|
||||
setIsSearchingMap(false);
|
||||
} else setSearchResults([]);
|
||||
}, 500);
|
||||
return () => clearTimeout(t);
|
||||
}, [locationQuery, showResults]);
|
||||
|
||||
const selectLocation = (place: any) => { setLocationQuery(place.display_name); setSelectedLat(place.lat); setSelectedLon(place.lon); setShowResults(false); };
|
||||
|
||||
const openGeoBlogModal = (node: any) => {
|
||||
setEditingNode(node); setActiveTab("story");
|
||||
try { setGallery(JSON.parse(node.galleryJson || "[]")); } catch { setGallery([]); }
|
||||
try { setVideos(JSON.parse(node.videosJson || "[]")); } catch { setVideos([]); }
|
||||
try { setRenders(JSON.parse(node.rendersJson || "[]")); } catch { setRenders([]); }
|
||||
try { const ds = JSON.parse(node.specificDatasheetJson || "{}"); setDatasheet(Array.isArray(ds) ? {} : ds); } catch { setDatasheet({}); }
|
||||
try { setModel3DDims(JSON.parse(node.model3DDimsJson || "{}")); } catch { setModel3DDims({}); }
|
||||
if (node.eventDate) setEventDate(new Date(node.eventDate).toISOString().split('T')[0]); else setEventDate("");
|
||||
};
|
||||
|
||||
const handleCreate = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault(); setIsSubmitting(true); setError("");
|
||||
const formData = new FormData(e.currentTarget);
|
||||
formData.set("lat", selectedLat); formData.set("lon", selectedLon); formData.set("location", locationQuery);
|
||||
const res = await createNode(formData);
|
||||
if (res.error) setError(res.error);
|
||||
else { setIsModalOpen(false); setLocationQuery(""); setSelectedLat(""); setSelectedLon(""); fetchNodesAndApps(); }
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
const handleSaveCaseStudy = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault(); setIsSavingCaseStudy(true); setError("");
|
||||
const formData = new FormData(e.currentTarget);
|
||||
formData.append("galleryJson", JSON.stringify(gallery.filter(i => i.trim())));
|
||||
formData.append("videosJson", JSON.stringify(videos.filter(v => v.trim())));
|
||||
formData.append("rendersJson", JSON.stringify(renders.filter(r => r.trim())));
|
||||
formData.append("specificDatasheetJson", JSON.stringify(datasheet));
|
||||
formData.append("model3DDimsJson", JSON.stringify(model3DDims));
|
||||
const res = await updateNodeCaseStudy(formData);
|
||||
if (res.error) setError(res.error); else { setEditingNode(null); fetchNodesAndApps(); }
|
||||
setIsSavingCaseStudy(false);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => { if (confirm("Delete this deployment?")) { await deleteNode(id); fetchNodesAndApps(); } };
|
||||
const handleToggle = async (id: string, status: boolean) => { await toggleNodeStatus(id, status); fetchNodesAndApps(); };
|
||||
|
||||
const availableTabs = [
|
||||
{ id: "story", label: "The Story", icon: FileText, hideForEvent: false },
|
||||
{ id: "tech", label: "Datasheet", icon: Cpu, hideForEvent: true },
|
||||
{ id: "media", label: "Media & Video", icon: Video, hideForEvent: false },
|
||||
{ id: "3d", label: "3D & Renders", icon: Box, hideForEvent: true }
|
||||
].filter(t => !(editingNode?.nodeType === "event" && t.hideForEvent));
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-6 md:p-12 max-w-7xl mx-auto">
|
||||
<div className="mb-10">
|
||||
<Link href="/hq-command/dashboard" className="inline-flex items-center gap-2 text-sm text-[#86868B] hover:text-[#00F0FF] transition-colors mb-6 group"><ArrowLeft size={16} className="group-hover:-translate-x-1 transition-transform" /> Back to Command Center</Link>
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
|
||||
<div><h1 className="text-3xl font-light text-white flex items-center gap-3"><Globe className="text-[#00F0FF]" /> Global Network</h1><p className="text-[#86868B] mt-2">Manage 3D Map coordinates, Installations, and Deep Case Studies.</p></div>
|
||||
<button onClick={() => setIsModalOpen(true)} className="flex items-center gap-2 bg-[#00F0FF]/10 text-[#00F0FF] border border-[#00F0FF]/20 px-5 py-2.5 rounded-xl font-medium hover:bg-[#00F0FF] hover:text-black transition-all"><Plus size={18} /> Add Deployment</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TABLE */}
|
||||
<div className="bg-[#111] border border-white/5 rounded-3xl overflow-hidden shadow-2xl"><div className="overflow-x-auto"><table className="w-full text-left border-collapse"><thead><tr className="border-b border-white/5 text-[10px] uppercase tracking-widest text-[#86868B] bg-black/40"><th className="p-6 font-semibold">Deployment Title & Location</th><th className="p-6 font-semibold">Type & Application</th><th className="p-6 font-semibold">Geo-Chronicle</th><th className="p-6 font-semibold">Status</th><th className="p-6 font-semibold text-right">Actions</th></tr></thead>
|
||||
<tbody>
|
||||
{isLoading ? <tr><td colSpan={5} className="p-8 text-center text-[#86868B]"><Loader2 className="animate-spin mx-auto mb-2" size={24} /> Syncing...</td></tr>
|
||||
: nodes.length === 0 ? <tr><td colSpan={5} className="p-8 text-center text-[#86868B]">No map nodes. Add the first deployment.</td></tr>
|
||||
: nodes.map(node => (
|
||||
<tr key={node.id} className={`border-b border-white/5 transition-colors group ${!node.isActive ? 'opacity-50' : 'hover:bg-white/[0.02]'}`}>
|
||||
<td className="p-6"><p className="font-medium text-white">{node.title}</p><p className="text-xs text-[#86868B] flex items-center gap-1 mt-1"><MapPin size={10} /> {node.location}</p></td>
|
||||
<td className="p-6"><div className="flex flex-col gap-1 items-start"><span className="bg-[#00F0FF]/10 text-[#00F0FF] px-2 py-0.5 rounded text-[10px] uppercase tracking-wider border border-[#00F0FF]/20">{node.nodeType}</span><span className="bg-white/10 text-white/80 px-2 py-0.5 rounded text-[10px] uppercase tracking-wider">{node.application.replace("-", " ")}</span></div></td>
|
||||
<td className="p-6">{node.projectOverview ? <span className="inline-flex items-center gap-1 text-[10px] text-[#00F0FF] border border-[#00F0FF]/30 bg-[#00F0FF]/10 px-2 py-1 rounded uppercase tracking-widest"><BookOpen size={10} /> Case Study Active</span> : <span className="text-[10px] text-[#86868B] uppercase tracking-widest">No Deep Data</span>}</td>
|
||||
<td className="p-6"><button onClick={() => handleToggle(node.id, node.isActive)} className={`text-xs font-medium px-3 py-1 rounded-full flex items-center gap-1.5 transition-colors ${node.isActive ? 'bg-emerald-500/10 text-emerald-400' : 'bg-red-500/10 text-red-400'}`}>{node.isActive ? <><Eye size={12} /> Visible</> : <><EyeOff size={12} /> Hidden</>}</button></td>
|
||||
<td className="p-6 text-right"><div className="flex justify-end gap-2"><button onClick={() => openGeoBlogModal(node)} className="text-[#86868B] hover:text-[#00F0FF] hover:bg-[#00F0FF]/10 p-2 rounded-lg transition-colors opacity-0 group-hover:opacity-100"><BookOpen size={18} /></button><button onClick={() => handleDelete(node.id)} className="text-[#86868B] hover:text-red-400 hover:bg-red-400/10 p-2 rounded-lg transition-colors opacity-0 group-hover:opacity-100"><Trash2 size={18} /></button></div></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody></table></div></div>
|
||||
|
||||
|
||||
{/* SOLUTION EDITOR MODAL */}
|
||||
{editingNode && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
|
||||
<div className="bg-[#111] border border-white/10 w-full max-w-4xl rounded-[2rem] p-0 relative shadow-2xl flex flex-col max-h-[90vh]">
|
||||
<div className="p-6 md:p-8 border-b border-white/10 relative pb-0">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[#00F0FF] to-transparent"></div>
|
||||
<button onClick={() => setEditingNode(null)} className="absolute top-6 right-6 text-[#86868B] hover:text-white"><X size={20} /></button>
|
||||
<div className="flex items-center gap-3 mb-1"><BookOpen size={24} className="text-[#00F0FF]" /><h3 className="text-2xl font-light text-white">Solution Editor</h3></div>
|
||||
<p className="text-[#86868B] text-xs font-mono uppercase tracking-widest mb-6">Target: {editingNode.title}</p>
|
||||
<div className="flex gap-6 border-b border-white/10 overflow-x-auto">
|
||||
{availableTabs.map(t => (
|
||||
<button key={t.id} type="button" onClick={() => setActiveTab(t.id as any)} className={`pb-4 text-xs uppercase tracking-widest font-semibold flex items-center gap-2 transition-all border-b-2 whitespace-nowrap ${activeTab === t.id ? "text-[#00F0FF] border-[#00F0FF]" : "text-[#86868B] border-transparent hover:text-white"}`}><t.icon size={14} /> {t.label}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="network-form" onSubmit={handleSaveCaseStudy} className="flex-1 overflow-y-auto p-6 md:p-8 [scrollbar-width:none]">
|
||||
<input type="hidden" name="id" value={editingNode.id} />
|
||||
|
||||
{/* TAB: THE STORY */}
|
||||
<div className={activeTab === "story" ? "block animate-in fade-in" : "hidden"}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5 flex items-center gap-1"><ImageIcon size={12}/> Cover Image</label>
|
||||
<div className="flex gap-2">
|
||||
<input name="mediaFileName" type="text" defaultValue={editingNode.mediaFileName || ""} placeholder="e.g., medellin-machine.jpg" className="flex-1 bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-[#00F0FF] font-mono text-sm focus:border-[#00F0FF] outline-none" />
|
||||
<button type="button" onClick={() => setCoverAssetsOpen(true)} className="flex items-center gap-1.5 px-3 py-3 text-xs text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 rounded-xl hover:bg-emerald-500/20 shrink-0"><FolderOpen size={14} /></button>
|
||||
</div>
|
||||
</div>
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5 flex items-center gap-1"><Calendar size={12}/> Date</label><input name="eventDate" type="date" value={eventDate} onChange={e => setEventDate(e.target.value)} className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-[#00F0FF] outline-none [color-scheme:dark]" /></div>
|
||||
</div>
|
||||
<div className="mb-6"><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Energy Savings / Highlight</label><input name="energySavings" type="text" defaultValue={editingNode.energySavings || ""} placeholder="e.g., -45% Energy vs Steam" className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-emerald-400 font-semibold text-sm focus:border-[#00F0FF] outline-none" /></div>
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-2 flex justify-between"><span>Project Chronicle (Markdown)</span><span className="text-[#00F0FF]/60 text-[9px] font-normal normal-case">Rich Editor + Assets</span></label>
|
||||
<MarkdownEditorCyan name="projectOverview" defaultValue={editingNode.projectOverview || ""} rows={10} placeholder="Write the full technical article..." slug={nodeSlug} />
|
||||
</div>
|
||||
<div className="bg-gradient-to-r from-[#00F0FF]/10 to-transparent border border-[#00F0FF]/20 p-4 rounded-xl flex items-center justify-between mt-6">
|
||||
<div className="flex items-center gap-3"><div className="p-2 bg-[#00F0FF]/20 rounded-lg text-[#00F0FF]"><Sparkles size={18} /></div><div><p className="text-sm text-white font-medium">Flux AI Auto-Translate</p><p className="text-[10px] text-[#86868B] uppercase tracking-widest mt-0.5">IT, VEC, ES, DE</p></div></div>
|
||||
<label className="relative inline-flex items-center cursor-pointer"><input type="checkbox" name="autoTranslate" defaultChecked className="sr-only peer" /><div className="w-11 h-6 bg-black/50 border border-white/10 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#00F0FF]"></div></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TAB: DATASHEET */}
|
||||
{editingNode?.nodeType !== "event" && (
|
||||
<div className={activeTab === "tech" ? "block animate-in fade-in" : "hidden"}>
|
||||
<div className="bg-[#00F0FF]/5 border border-[#00F0FF]/20 p-4 rounded-xl mb-6 flex items-center gap-3"><Cpu className="text-[#00F0FF]" size={20} /><p className="text-xs text-[#00F0FF]/80">Dynamic Terminal Datasheet. Check to make a stat glow large.</p></div>
|
||||
<div className="space-y-4">
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Machine Model</label><input value={datasheet.model || ""} onChange={e => setDatasheet({...datasheet, model: e.target.value})} placeholder="e.g. Tiffany 20" className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-lg font-medium focus:border-[#00F0FF] outline-none" /></div>
|
||||
<div className="space-y-3 pt-4 border-t border-white/5">
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B]">Specifications</label>
|
||||
{(datasheet.specs || []).map((spec: any, idx: number) => (
|
||||
<div key={idx} className={`flex gap-3 items-center p-3 rounded-xl border ${spec.highlight ? 'bg-[#00F0FF]/5 border-[#00F0FF]/30' : 'bg-black/40 border-white/10'}`}>
|
||||
<input value={spec.label} onChange={e => { const n = [...(datasheet.specs||[])]; n[idx].label = e.target.value; setDatasheet({...datasheet, specs: n}); }} placeholder="Spec Name" className="w-1/3 bg-transparent text-[#86868B] text-[10px] uppercase tracking-wider font-semibold outline-none" />
|
||||
<input value={spec.value} onChange={e => { const n = [...(datasheet.specs||[])]; n[idx].value = e.target.value; setDatasheet({...datasheet, specs: n}); }} placeholder="Value" className="flex-1 bg-transparent text-white font-medium text-sm outline-none" />
|
||||
<label className="flex items-center gap-1.5 text-[10px] uppercase text-[#00F0FF] cursor-pointer shrink-0 border-l border-white/10 pl-3"><input type="checkbox" checked={spec.highlight} onChange={e => { const n = [...(datasheet.specs||[])]; n[idx].highlight = e.target.checked; setDatasheet({...datasheet, specs: n}); }} className="accent-[#00F0FF] w-4 h-4" /> Big</label>
|
||||
<button type="button" onClick={() => { const n = [...(datasheet.specs||[])]; n.splice(idx, 1); setDatasheet({...datasheet, specs: n}); }} className="text-[#86868B] hover:text-red-400 pl-2"><Trash2 size={16}/></button>
|
||||
</div>
|
||||
))}
|
||||
<button type="button" onClick={() => setDatasheet({...datasheet, specs: [...(datasheet.specs||[]), {label:"",value:"",highlight:false}]})} className="w-full border border-dashed border-white/20 text-[#86868B] hover:text-white hover:border-[#00F0FF] py-3.5 rounded-xl flex justify-center items-center gap-2 text-xs uppercase tracking-widest font-semibold"><Plus size={14} /> Add Spec</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TAB: MEDIA & VIDEO */}
|
||||
<div className={activeTab === "media" ? "block animate-in fade-in" : "hidden"}>
|
||||
<p className="text-xs text-[#86868B] mb-6">Videos and photos for this case study.</p>
|
||||
<div className="mb-8">
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-3 flex items-center gap-2"><Video size={12}/> Videos — public/cases/videos</label>
|
||||
{videos.map((vid, idx) => (<div key={idx} className="flex gap-2 mb-3"><input value={vid} onChange={e => { const n = [...videos]; n[idx] = e.target.value; setVideos(n); }} placeholder="e.g., videoDemo.mp4" className="flex-1 bg-black/60 border border-white/10 rounded-lg px-4 py-2.5 text-[#00F0FF] font-mono text-sm focus:border-[#00F0FF] outline-none" /><button type="button" onClick={() => setVideos(videos.filter((_, i) => i !== idx))} className="text-[#86868B] hover:text-red-400 px-3 bg-black/40 rounded-lg border border-white/10"><Trash2 size={14}/></button></div>))}
|
||||
<div className="flex gap-2">
|
||||
<button type="button" onClick={() => setVideos([...videos, ""])} className="flex-1 border border-dashed border-white/20 text-[#86868B] hover:text-white py-3 rounded-lg flex justify-center items-center gap-2 text-xs"><Plus size={14} /> Add Video</button>
|
||||
<button type="button" onClick={() => { setMediaAssetTarget("video"); setMediaAssetsOpen(true); }} className="flex items-center gap-1.5 px-4 py-3 text-xs text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 rounded-lg hover:bg-emerald-500/20 font-medium shrink-0"><FolderOpen size={14} /> Browse Assets</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-3 flex items-center gap-2"><ImageIcon size={12}/> Photo Gallery — public/cases</label>
|
||||
{gallery.map((img, idx) => (<div key={idx} className="flex gap-2 mb-3"><input value={img} onChange={e => { const n = [...gallery]; n[idx] = e.target.value; setGallery(n); }} placeholder="e.g., install-1.jpg" className="flex-1 bg-black/60 border border-white/10 rounded-lg px-4 py-2.5 text-white text-sm focus:border-[#00F0FF] outline-none" /><button type="button" onClick={() => setGallery(gallery.filter((_, i) => i !== idx))} className="text-[#86868B] hover:text-red-400 px-3 bg-black/40 rounded-lg border border-white/10"><Trash2 size={14}/></button></div>))}
|
||||
<div className="flex gap-2">
|
||||
<button type="button" onClick={() => setGallery([...gallery, ""])} className="flex-1 border border-dashed border-white/20 text-[#86868B] hover:text-white py-3 rounded-lg flex justify-center items-center gap-2 text-xs"><Plus size={14} /> Add Photo</button>
|
||||
<button type="button" onClick={() => { setMediaAssetTarget("image"); setMediaAssetsOpen(true); }} className="flex items-center gap-1.5 px-4 py-3 text-xs text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 rounded-lg hover:bg-emerald-500/20 font-medium shrink-0"><FolderOpen size={14} /> Browse Assets</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TAB: 3D & RENDERS */}
|
||||
{editingNode?.nodeType !== "event" && (
|
||||
<div className={activeTab === "3d" ? "block animate-in fade-in" : "hidden"}>
|
||||
<p className="text-xs text-[#86868B] mb-6">3D models, dimensions, and renders for the AR viewer.</p>
|
||||
<div className="mb-8">
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5 flex items-center gap-2"><Box size={12}/> 3D Model (AR) — public/cases/models</label>
|
||||
<div className="flex gap-2">
|
||||
<input name="model3DPath" defaultValue={editingNode.model3DPath || ""} placeholder="e.g., flxd60a.glb" className="flex-1 bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-purple-400 font-mono text-sm focus:border-purple-400 outline-none" />
|
||||
<button type="button" onClick={() => { setThreeDAssetTarget("model"); setThreeDAssetsOpen(true); }} className="flex items-center gap-1.5 px-4 py-3 text-xs text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 rounded-xl hover:bg-emerald-500/20 font-medium shrink-0"><FolderOpen size={14} /> Browse</button>
|
||||
</div>
|
||||
<p className="text-[9px] text-[#86868B] mt-1.5">GLB for Android/desktop. USDZ (iOS) auto-derived.</p>
|
||||
</div>
|
||||
|
||||
{/* DIMENSIONS PANEL */}
|
||||
<div className="mb-8 bg-white/[0.03] border border-white/8 rounded-2xl p-5">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<label className="text-[10px] uppercase tracking-widest text-[#00F0FF] font-semibold flex items-center gap-2">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-[#00F0FF]"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
|
||||
Physical Dimensions — AR Scale
|
||||
</label>
|
||||
{model3DDims.w && model3DDims.d && (<div className="flex items-center gap-1.5 bg-[#00F0FF]/10 border border-[#00F0FF]/20 rounded-lg px-3 py-1"><span className="text-[9px] text-[#00F0FF] font-bold uppercase">Footprint</span><span className="text-[#00F0FF] font-mono text-sm font-bold">{((Number(model3DDims.w)/1000) * (Number(model3DDims.d)/1000)).toFixed(2)}</span><span className="text-[9px] text-[#86868B]">m²</span></div>)}
|
||||
</div>
|
||||
<p className="text-[10px] text-[#86868B] mb-4">These values feed the AR viewer HUD, space notes, and human scale reference.</p>
|
||||
<div className="grid grid-cols-3 gap-3 mb-4">
|
||||
{[{key:'w',label:'Width (W)',ph:'9200',color:'#f472b6',hint:'Largo'},{key:'h',label:'Height (H)',ph:'3600',color:'#34d399',hint:'Alto'},{key:'d',label:'Depth (D)',ph:'2100',color:'#60a5fa',hint:'Fondo'}].map(dim => (
|
||||
<div key={dim.key}>
|
||||
<label className="block text-[9px] uppercase tracking-widest mb-1.5" style={{color:dim.color}}>{dim.label}</label>
|
||||
<div className="flex items-center bg-black/60 border border-white/10 rounded-xl overflow-hidden">
|
||||
<input type="number" min="0" value={(model3DDims as any)[dim.key] || ''} onChange={e => setModel3DDims({...model3DDims, [dim.key]: e.target.value})} placeholder={dim.ph} className="flex-1 bg-transparent px-3 py-2.5 font-mono text-sm outline-none" style={{color:dim.color}} />
|
||||
<span className="pr-3 text-[10px] text-[#86868B] font-mono">{model3DDims.unit || 'mm'}</span>
|
||||
</div>
|
||||
<span className="text-[9px] text-[#86868B] mt-0.5 block">{dim.hint}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div><label className="block text-[9px] uppercase tracking-widest text-[#86868B] mb-1.5">Unit</label><select value={model3DDims.unit || 'mm'} onChange={e => setModel3DDims({...model3DDims, unit: e.target.value})} className="w-full bg-black/60 border border-white/10 rounded-xl px-3 py-2.5 text-white text-sm outline-none"><option value="mm">mm</option><option value="cm">cm</option><option value="m">m</option></select></div>
|
||||
<div><label className="block text-[9px] uppercase tracking-widest text-[#86868B] mb-1.5">Weight</label><input type="text" value={model3DDims.weight || ''} onChange={e => setModel3DDims({...model3DDims, weight: e.target.value})} placeholder="e.g. 4200 kg" className="w-full bg-black/60 border border-white/10 rounded-xl px-3 py-2.5 text-white font-mono text-sm outline-none" /></div>
|
||||
</div>
|
||||
{(model3DDims.w || model3DDims.h || model3DDims.d) && (
|
||||
<div className="mt-4 pt-4 border-t border-white/5 flex flex-wrap gap-3 items-center">
|
||||
<span className="text-[9px] text-[#86868B] uppercase tracking-widest font-semibold">Preview:</span>
|
||||
{[{l:'W',v:model3DDims.w,c:'#f472b6'},{l:'H',v:model3DDims.h,c:'#34d399'},{l:'D',v:model3DDims.d,c:'#60a5fa'}].filter(d=>d.v).map(d=>(<div key={d.l} className="flex items-baseline gap-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5"><span className="text-[9px] font-bold" style={{color:d.c}}>{d.l}</span><span className="text-white font-mono text-sm">{d.v}</span><span className="text-[9px] text-[#86868B]">{model3DDims.unit||'mm'}</span></div>))}
|
||||
{model3DDims.w && model3DDims.d && <div className="flex items-baseline gap-1 bg-[#00F0FF]/8 border border-[#00F0FF]/15 rounded-lg px-3 py-1.5"><span className="text-[9px] font-bold text-[#00F0FF]">Area</span><span className="text-[#00F0FF] font-mono text-sm">{((Number(model3DDims.w)/1000)*(Number(model3DDims.d)/1000)).toFixed(2)}</span><span className="text-[9px] text-[#86868B]">m²</span></div>}
|
||||
{model3DDims.h && <div className="text-[9px] text-[#86868B]">{Number(model3DDims.h) > 1750 ? (Number(model3DDims.h)/1750).toFixed(1) + '× taller' : (1750/Number(model3DDims.h)).toFixed(1) + '× shorter'} than 1.75m</div>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-3 flex items-center gap-2"><ImageIcon size={12}/> Studio Renders</label>
|
||||
{renders.map((ren, idx) => (<div key={idx} className="flex gap-2 mb-3"><input value={ren} onChange={e => { const n = [...renders]; n[idx] = e.target.value; setRenders(n); }} placeholder="render-front.jpg" className="flex-1 bg-black/60 border border-white/10 rounded-lg px-4 py-2.5 text-white text-sm focus:border-[#00F0FF] outline-none" /><button type="button" onClick={() => setRenders(renders.filter((_, i) => i !== idx))} className="text-[#86868B] hover:text-red-400 px-3 bg-black/40 rounded-lg border border-white/10"><Trash2 size={14}/></button></div>))}
|
||||
<div className="flex gap-2">
|
||||
<button type="button" onClick={() => setRenders([...renders, ""])} className="flex-1 border border-dashed border-white/20 text-[#86868B] hover:text-white py-3 rounded-lg flex justify-center items-center gap-2 text-xs"><Plus size={14} /> Add Render</button>
|
||||
<button type="button" onClick={() => { setThreeDAssetTarget("render"); setThreeDAssetsOpen(true); }} className="flex items-center gap-1.5 px-4 py-3 text-xs text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 rounded-lg hover:bg-emerald-500/20 font-medium shrink-0"><FolderOpen size={14} /> Browse Assets</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
|
||||
{/* Asset Managers OUTSIDE the form to prevent submit propagation */}
|
||||
<AssetManager scope="cases" slug={nodeSlug} isOpen={coverAssetsOpen} onClose={() => setCoverAssetsOpen(false)} onSelect={(item) => {
|
||||
const inp = document.querySelector('input[name="mediaFileName"]') as HTMLInputElement;
|
||||
if (inp) { inp.value = item.name; inp.dispatchEvent(new Event('input', { bubbles: true })); }
|
||||
}} accentColor="#00F0FF" />
|
||||
<AssetManager scope="cases" slug={nodeSlug} isOpen={mediaAssetsOpen} onClose={() => setMediaAssetsOpen(false)} onSelect={(item) => {
|
||||
if (mediaAssetTarget === "video") setVideos(p => [...p, item.name]);
|
||||
else setGallery(p => [...p, item.name]);
|
||||
}} accentColor="#00F0FF" />
|
||||
<AssetManager scope="cases" slug={nodeSlug} isOpen={threeDAssetsOpen} onClose={() => setThreeDAssetsOpen(false)} onSelect={(item) => {
|
||||
if (threeDAssetTarget === "model") {
|
||||
const inp = document.querySelector('input[name="model3DPath"]') as HTMLInputElement;
|
||||
if (inp) { inp.value = item.name; inp.dispatchEvent(new Event('input', { bubbles: true })); }
|
||||
} else {
|
||||
setRenders(p => [...p, item.name]);
|
||||
}
|
||||
}} accentColor="#00F0FF" initialPath={threeDAssetTarget === "model" ? "models" : "renders"} />
|
||||
|
||||
<div className="p-6 border-t border-white/10 bg-[#111] rounded-b-[2rem] flex justify-end gap-3">
|
||||
<button type="button" onClick={() => setEditingNode(null)} className="px-5 py-3 text-sm font-medium text-[#86868B] hover:text-white">Cancel</button>
|
||||
<button onClick={() => (document.getElementById("network-form") as HTMLFormElement)?.requestSubmit()} disabled={isSavingCaseStudy} className="flex items-center gap-2 bg-[#00F0FF] text-black px-8 py-3 rounded-xl text-sm font-semibold hover:bg-white disabled:opacity-50 shadow-[0_0_15px_rgba(0,240,255,0.3)]">{isSavingCaseStudy ? <><Loader2 size={18} className="animate-spin" /> Processing AI...</> : "Save Complete Chronicle"}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* ADD DEPLOYMENT MODAL */}
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
|
||||
<div className="bg-[#111] border border-white/10 w-full max-w-lg rounded-[2rem] p-8 relative shadow-2xl overflow-visible">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[#00F0FF] to-transparent"></div>
|
||||
<button onClick={() => setIsModalOpen(false)} className="absolute top-6 right-6 text-[#86868B] hover:text-white"><X size={20} /></button>
|
||||
<h3 className="text-2xl font-light mb-2 text-[#00F0FF]">Add Deployment</h3>
|
||||
<p className="text-[#86868B] text-sm mb-6">Search for a global city to auto-calculate coordinates.</p>
|
||||
<form onSubmit={handleCreate} className="space-y-4">
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Company / Facility Name</label><input name="title" type="text" required placeholder="e.g., Advanced Fabrics Inc." className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-[#00F0FF] outline-none" /></div>
|
||||
<div className="relative">
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5 flex items-center gap-1"><Search size={10} className="text-[#00F0FF]" /> City Search (Satellite)</label>
|
||||
<input type="text" value={locationQuery} onChange={e => { setLocationQuery(e.target.value); setShowResults(true); }} required placeholder="Type a city name..." className="w-full bg-black/60 border border-[#00F0FF]/30 rounded-xl px-4 py-3 text-white text-sm focus:border-[#00F0FF] outline-none" autoComplete="off"/>
|
||||
{showResults && locationQuery.length > 2 && (
|
||||
<div className="absolute z-50 top-full mt-2 w-full bg-[#1A1A1A] border border-white/10 rounded-xl shadow-2xl overflow-hidden max-h-48 overflow-y-auto">
|
||||
{isSearchingMap ? <div className="p-4 text-center text-[#86868B] text-xs flex justify-center items-center gap-2"><Loader2 className="animate-spin" size={14} /> Scanning...</div>
|
||||
: searchResults.length > 0 ? searchResults.map((place, idx) => (
|
||||
<button key={idx} type="button" onClick={() => selectLocation(place)} className="w-full text-left px-4 py-3 border-b border-white/5 hover:bg-[#00F0FF]/10 hover:text-[#00F0FF] transition-colors text-xs text-white">{place.display_name}</button>
|
||||
)) : <div className="p-4 text-center text-[#86868B] text-xs">No coordinates found.</div>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Latitude</label><input readOnly value={selectedLat} placeholder="Auto" className="w-full bg-black/20 border border-white/5 rounded-xl px-4 py-3 text-[#00F0FF] font-mono text-sm opacity-60 cursor-not-allowed" /></div>
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Longitude</label><input readOnly value={selectedLon} placeholder="Auto" className="w-full bg-black/20 border border-white/5 rounded-xl px-4 py-3 text-[#00F0FF] font-mono text-sm opacity-60 cursor-not-allowed" /></div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Deployment Type</label><select name="nodeType" value={createNodeType} onChange={e => setCreateNodeType(e.target.value)} required className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-[#00F0FF] text-sm focus:border-[#00F0FF] outline-none appearance-none"><option value="installation">📍 Field Installation</option><option value="event">🗓️ Event</option><option value="hq">🏢 FLUX Legacy HQ</option></select></div>
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Application Category</label><select name="application" required className={"w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-[#00F0FF] outline-none appearance-none " + (createNodeType === "hq" ? "opacity-50" : "")}><option value="all">🌐 All Applications</option>{appsList.filter(a => a.isActive).map(a => <option key={a.slug} value={a.slug}>{a.title}</option>)}</select></div>
|
||||
<div className="md:col-span-2"><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">{createNodeType === "event" ? "Event Location / Stand" : "Key Stat / Metric"}</label><input name="stats" type="text" required placeholder={createNodeType === "event" ? "e.g., Hall 4, Stand B12" : "e.g., 50% Energy Savings"} className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-[#00F0FF] outline-none" /></div>
|
||||
</div>
|
||||
{error && <p className="text-red-400 text-xs text-center bg-red-400/10 py-2 rounded-lg">{error}</p>}
|
||||
<button type="submit" disabled={isSubmitting || !selectedLat} className="w-full flex items-center justify-center gap-2 bg-[#00F0FF] text-black py-3.5 mt-4 rounded-xl text-sm font-semibold hover:bg-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed">{isSubmitting ? <Loader2 size={18} className="animate-spin" /> : "Deploy to Map"}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
"use server";
|
||||
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { revalidatePath } from "next/cache";
|
||||
// 🔥 Importamos nuestra nueva IA traductora
|
||||
import { translateContentForCMS } from "@/lib/aiTranslator";
|
||||
|
||||
export async function getNewsArticles() {
|
||||
try {
|
||||
const articles = await prisma.newsArticle.findMany({
|
||||
orderBy: [{ order: 'asc' }, { publishedAt: 'desc' }]
|
||||
});
|
||||
return { success: true, articles };
|
||||
} catch (error: any) {
|
||||
return { error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function createNewsArticle(formData: FormData) {
|
||||
try {
|
||||
const title = formData.get("title") as string;
|
||||
const excerpt = formData.get("excerpt") as string;
|
||||
const content = formData.get("content") as string;
|
||||
const coverImage = formData.get("coverImage") as string;
|
||||
const category = formData.get("category") as string;
|
||||
const linkedinUrl = formData.get("linkedinUrl") as string;
|
||||
const order = parseInt(formData.get("order") as string) || 0;
|
||||
const galleryJson = formData.get("galleryJson") as string;
|
||||
|
||||
// Capturamos si Patrizio pidió traducción por IA
|
||||
const autoTranslate = formData.get("autoTranslate") === "on";
|
||||
|
||||
const slug = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)+/g, '');
|
||||
|
||||
// 🔥 LA MAGIA DE LA IA 🔥
|
||||
let translationsJson = "{}";
|
||||
if (autoTranslate) {
|
||||
// Solo le mandamos a la IA los textos que se deben leer (no mandamos URLs ni números de orden)
|
||||
const aiResult = await translateContentForCMS({ title, excerpt, content, category });
|
||||
if (aiResult) {
|
||||
translationsJson = JSON.stringify(aiResult);
|
||||
}
|
||||
}
|
||||
|
||||
await prisma.newsArticle.create({
|
||||
data: {
|
||||
title, slug, excerpt, content, coverImage, category,
|
||||
linkedinUrl, order, galleryJson, translationsJson
|
||||
}
|
||||
});
|
||||
|
||||
revalidatePath("/news");
|
||||
revalidatePath("/[locale]/news", "layout");
|
||||
return { success: true };
|
||||
} catch (error: any) {
|
||||
return { error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateNewsArticle(formData: FormData) {
|
||||
try {
|
||||
const id = formData.get("id") as string;
|
||||
const title = formData.get("title") as string;
|
||||
const excerpt = formData.get("excerpt") as string;
|
||||
const content = formData.get("content") as string;
|
||||
const coverImage = formData.get("coverImage") as string;
|
||||
const category = formData.get("category") as string;
|
||||
const linkedinUrl = formData.get("linkedinUrl") as string;
|
||||
const order = parseInt(formData.get("order") as string) || 0;
|
||||
const galleryJson = formData.get("galleryJson") as string;
|
||||
|
||||
const autoTranslate = formData.get("autoTranslate") === "on";
|
||||
|
||||
let updateData: any = {
|
||||
title, excerpt, content, coverImage, category, linkedinUrl, order, galleryJson
|
||||
};
|
||||
|
||||
// 🔥 LA MAGIA DE LA IA (Actualización) 🔥
|
||||
if (autoTranslate) {
|
||||
const aiResult = await translateContentForCMS({ title, excerpt, content, category });
|
||||
if (aiResult) {
|
||||
updateData.translationsJson = JSON.stringify(aiResult);
|
||||
}
|
||||
}
|
||||
|
||||
await prisma.newsArticle.update({ where: { id }, data: updateData });
|
||||
|
||||
revalidatePath("/news");
|
||||
revalidatePath("/[locale]/news", "layout");
|
||||
return { success: true };
|
||||
} catch (error: any) {
|
||||
return { error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteNewsArticle(id: string) {
|
||||
try {
|
||||
await prisma.newsArticle.delete({ where: { id } });
|
||||
revalidatePath("/news");
|
||||
revalidatePath("/[locale]/news", "layout");
|
||||
return { success: true };
|
||||
} catch (error: any) {
|
||||
return { error: error.message };
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,485 @@
|
||||
//src/app/hq-command/dashboard/news/page.tsx
|
||||
"use client";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
ArrowLeft, Newspaper, Plus, Trash2, Loader2, X, Linkedin, Edit3, Sparkles,
|
||||
Bold, Italic, Heading1, Heading2, Heading3, List, ListOrdered, Quote, Table, Minus,
|
||||
RotateCcw, RotateCw, Maximize2, Minimize2, ChevronDown,
|
||||
FolderOpen, Upload, FolderPlus, ChevronRight, File, ArrowUpFromLine,
|
||||
Grid3X3, LayoutList, Copy, Check, Image as ImageIcon, Video, Box, Search
|
||||
} from "lucide-react";
|
||||
import { getNewsArticles, createNewsArticle, updateNewsArticle, deleteNewsArticle } from "./actions";
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// ASSET MANAGER — Reusable file browser (same as Network but for news scope)
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
interface AssetItem {
|
||||
name: string; type: "file" | "folder"; mediaType?: string; extension?: string;
|
||||
path: string; publicUrl?: string; size?: string; childCount?: number;
|
||||
}
|
||||
|
||||
interface AssetManagerProps {
|
||||
slug: string; scope?: string; isOpen: boolean; onClose: () => void;
|
||||
onSelect: (item: { name: string; publicUrl: string; mediaType: string; path: string }) => void;
|
||||
accentColor?: string; initialPath?: string;
|
||||
}
|
||||
|
||||
function AssetManager({ slug, scope = "news", isOpen, onClose, onSelect, accentColor = "#00F0FF", initialPath = "" }: AssetManagerProps) {
|
||||
const [currentPath, setCurrentPath] = useState(initialPath);
|
||||
const [items, setItems] = useState<AssetItem[]>([]);
|
||||
const [breadcrumbs, setBreadcrumbs] = useState<{name: string; path: string}[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [uploadProgress, setUploadProgress] = useState("");
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [showNewFolder, setShowNewFolder] = useState(false);
|
||||
const [newFolderName, setNewFolderName] = useState("");
|
||||
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [copiedPath, setCopiedPath] = useState<string | null>(null);
|
||||
|
||||
const fetchAssets = useCallback(async (dirPath: string = "") => {
|
||||
setIsLoading(true); setError(null);
|
||||
try {
|
||||
const params = new URLSearchParams({ scope, slug, path: dirPath });
|
||||
const res = await fetch(`/api/assets?${params}`);
|
||||
const data = await res.json();
|
||||
if (data.success) { setItems(data.items); setBreadcrumbs(data.breadcrumbs); setCurrentPath(dirPath); }
|
||||
else setError(data.error || "Failed to load");
|
||||
} catch { setError("Connection error — check /api/assets/route.ts"); }
|
||||
setIsLoading(false);
|
||||
}, [scope, slug]);
|
||||
|
||||
useEffect(() => { if (isOpen) { fetchAssets(initialPath || currentPath); setSearchQuery(""); } }, [isOpen]); // eslint-disable-line
|
||||
|
||||
const uploadFile = async (file: File) => {
|
||||
setIsUploading(true); setUploadProgress(`Uploading ${file.name}...`);
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append("scope", scope); fd.append("slug", slug); fd.append("path", currentPath); fd.append("file", file);
|
||||
const res = await fetch("/api/assets", { method: "POST", body: fd });
|
||||
const data = await res.json();
|
||||
if (data.success) { setUploadProgress("✓ " + data.file.name); await fetchAssets(currentPath); setTimeout(() => setUploadProgress(""), 2000); }
|
||||
else { setUploadProgress("✗ " + data.error); setTimeout(() => setUploadProgress(""), 4000); }
|
||||
} catch { setUploadProgress("✗ Failed"); setTimeout(() => setUploadProgress(""), 3000); }
|
||||
setIsUploading(false);
|
||||
};
|
||||
|
||||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => { if (e.target.files) Array.from(e.target.files).forEach(uploadFile); e.target.value = ""; };
|
||||
const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(true); };
|
||||
const handleDragLeave = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(false); };
|
||||
const handleDrop = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(false); if (e.dataTransfer.files.length > 0) Array.from(e.dataTransfer.files).forEach(uploadFile); };
|
||||
|
||||
const createFolder = async () => {
|
||||
if (!newFolderName.trim()) return;
|
||||
try {
|
||||
const res = await fetch("/api/assets", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ scope, slug, folderName: newFolderName, parentPath: currentPath }) });
|
||||
const data = await res.json();
|
||||
if (data.success) { setShowNewFolder(false); setNewFolderName(""); await fetchAssets(currentPath); }
|
||||
else alert(data.error);
|
||||
} catch { alert("Connection error"); }
|
||||
};
|
||||
|
||||
const deleteFile = async (filePath: string, fileName: string) => {
|
||||
if (!confirm('Delete "' + fileName + '"?')) return;
|
||||
try {
|
||||
const res = await fetch("/api/assets", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ scope, slug, filePath }) });
|
||||
const data = await res.json(); if (data.success) await fetchAssets(currentPath); else alert(data.error);
|
||||
} catch { alert("Failed"); }
|
||||
};
|
||||
|
||||
const handleSelect = (item: AssetItem, e?: React.MouseEvent) => {
|
||||
if (e) { e.preventDefault(); e.stopPropagation(); }
|
||||
if (item.type === "folder") { fetchAssets(item.path); return; }
|
||||
onSelect({ name: item.name, publicUrl: item.publicUrl || "/" + scope + "/" + slug + "/" + item.path, mediaType: item.mediaType || "unknown", path: item.path });
|
||||
onClose();
|
||||
};
|
||||
|
||||
const copyPath = (item: AssetItem) => {
|
||||
navigator.clipboard.writeText(item.publicUrl || "/" + scope + "/" + slug + "/" + item.path);
|
||||
setCopiedPath(item.path); setTimeout(() => setCopiedPath(null), 1500);
|
||||
};
|
||||
|
||||
const filtered = searchQuery ? items.filter(i => i.name.toLowerCase().includes(searchQuery.toLowerCase())) : items;
|
||||
const typeBadge = (mt?: string) => {
|
||||
const s: Record<string, string> = { image: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20", video: "bg-blue-500/10 text-blue-400 border-blue-500/20", model: "bg-purple-500/10 text-purple-400 border-purple-500/20" };
|
||||
return s[mt || ""] || "bg-white/5 text-[#86868B] border-white/10";
|
||||
};
|
||||
const renderThumb = (item: AssetItem) => {
|
||||
if (item.type === "folder") return <div className="w-full h-full flex items-center justify-center bg-white/[0.02]"><FolderOpen size={28} style={{ color: accentColor, opacity: 0.7 }} /></div>;
|
||||
if (item.mediaType === "image" && item.publicUrl) return <img src={item.publicUrl} alt={item.name} className="w-full h-full object-cover" loading="lazy" />;
|
||||
if (item.mediaType === "video") return <div className="w-full h-full flex items-center justify-center bg-blue-500/5"><Video size={24} className="text-blue-400/60" /></div>;
|
||||
return <div className="w-full h-full flex items-center justify-center bg-white/[0.02]"><File size={24} className="text-[#86868B]/50" /></div>;
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[70] flex items-center justify-center p-4 bg-black/85 backdrop-blur-md" onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
|
||||
<div className="bg-[#0D0D0D] border border-white/10 w-full max-w-4xl rounded-[2rem] shadow-2xl flex flex-col max-h-[85vh] relative overflow-hidden" onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop} onClick={(e) => e.stopPropagation()}>
|
||||
{isDragging && (
|
||||
<div className="absolute inset-0 z-50 border-2 border-dashed rounded-[2rem] flex items-center justify-center backdrop-blur-sm" style={{ borderColor: accentColor + "80", background: accentColor + "15" }}>
|
||||
<div className="text-center"><ArrowUpFromLine size={48} style={{ color: accentColor }} className="mx-auto mb-3 animate-bounce" /><p style={{ color: accentColor }} className="font-medium text-lg">Drop files to upload</p></div>
|
||||
</div>
|
||||
)}
|
||||
<div className="px-6 py-5 border-b border-white/10 shrink-0">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3"><div className="p-2 rounded-xl" style={{ background: accentColor + "20", color: accentColor }}><FolderOpen size={20} /></div><div><h3 className="text-lg font-medium text-white">Asset Manager</h3><p className="text-[10px] text-[#86868B] uppercase tracking-widest font-mono">/public/{scope}/{slug}/</p></div></div>
|
||||
<button onClick={onClose} className="text-[#86868B] hover:text-white p-2 hover:bg-white/5 rounded-xl"><X size={20} /></button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-1 text-sm overflow-x-auto [scrollbar-width:none] flex-1 min-w-0">
|
||||
{breadcrumbs.map((crumb, idx) => (<span key={idx} className="flex items-center shrink-0">{idx > 0 && <ChevronRight size={12} className="text-[#86868B]/50 mx-0.5" />}<button onClick={() => fetchAssets(crumb.path)} className={`px-2 py-1 rounded-lg text-xs ${idx === breadcrumbs.length - 1 ? "bg-white/10" : "text-[#86868B] hover:text-white hover:bg-white/5"}`} style={idx === breadcrumbs.length - 1 ? { color: accentColor } : {}}>{crumb.name}</button></span>))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<div className="relative"><Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[#86868B]" /><input value={searchQuery} onChange={e => setSearchQuery(e.target.value)} placeholder="Filter..." className="bg-white/5 border border-white/10 rounded-lg pl-8 pr-3 py-1.5 text-xs text-white w-32 focus:w-48 transition-all outline-none" /></div>
|
||||
<div className="flex bg-white/5 rounded-lg border border-white/10 overflow-hidden">
|
||||
<button onClick={() => setViewMode("grid")} className={`p-1.5 ${viewMode === "grid" ? "text-[#00F0FF] bg-white/10" : "text-[#86868B]"}`}><Grid3X3 size={14} /></button>
|
||||
<button onClick={() => setViewMode("list")} className={`p-1.5 ${viewMode === "list" ? "text-[#00F0FF] bg-white/10" : "text-[#86868B]"}`}><LayoutList size={14} /></button>
|
||||
</div>
|
||||
<button onClick={() => setShowNewFolder(!showNewFolder)} className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-[#86868B] hover:text-white bg-white/5 border border-white/10 rounded-lg"><FolderPlus size={13} /> Folder</button>
|
||||
<button onClick={() => fileInputRef.current?.click()} disabled={isUploading} className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-black rounded-lg font-medium disabled:opacity-50" style={{ background: accentColor }}><Upload size={13} /> Upload</button>
|
||||
<input ref={fileInputRef} type="file" multiple accept=".jpg,.jpeg,.png,.webp,.gif,.svg,.avif,.mp4,.webm,.mov,.pdf" onChange={handleFileSelect} className="hidden" />
|
||||
</div>
|
||||
</div>
|
||||
{showNewFolder && (<div className="flex items-center gap-2 mt-3 pt-3 border-t border-white/5"><FolderPlus size={14} style={{ color: accentColor }} /><input value={newFolderName} onChange={e => setNewFolderName(e.target.value)} onKeyDown={e => { if (e.key === "Enter") createFolder(); if (e.key === "Escape") { setShowNewFolder(false); setNewFolderName(""); } }} placeholder="folder-name" autoFocus className="flex-1 bg-black/40 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-white outline-none font-mono" /><button onClick={createFolder} className="px-3 py-1.5 text-xs text-black rounded-lg font-medium" style={{ background: accentColor }}>Create</button><button onClick={() => { setShowNewFolder(false); setNewFolderName(""); }} className="px-3 py-1.5 text-xs text-[#86868B]">Cancel</button></div>)}
|
||||
{uploadProgress && <div className="mt-3 pt-3 border-t border-white/5 flex items-center gap-2 text-xs">{isUploading && <Loader2 size={12} className="animate-spin" style={{ color: accentColor }} />}<span className={uploadProgress.startsWith("✓") ? "text-emerald-400" : uploadProgress.startsWith("✗") ? "text-red-400" : ""} style={isUploading ? { color: accentColor } : {}}>{uploadProgress}</span></div>}
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-4 [scrollbar-width:none]">
|
||||
{isLoading ? <div className="flex items-center justify-center py-20"><Loader2 size={24} className="animate-spin" style={{ color: accentColor }} /></div>
|
||||
: error ? <div className="flex flex-col items-center justify-center py-20 text-center"><X size={32} className="text-red-400/50 mb-3" /><p className="text-red-400/80 text-sm">{error}</p></div>
|
||||
: filtered.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center"><FolderOpen size={48} className="text-[#86868B]/20 mb-4" />
|
||||
{searchQuery ? <p className="text-[#86868B] text-sm">No matches</p> : <><p className="text-[#86868B] text-sm mb-2">Empty directory</p><div className="flex gap-2 mt-4">{["images", "gallery"].map(f => (<button key={f} onClick={async () => { await fetch("/api/assets", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ scope, slug, folderName: f, parentPath: currentPath }) }); fetchAssets(currentPath); }} className="px-3 py-2 text-xs border rounded-lg" style={{ color: accentColor, borderColor: accentColor + "30" }}>+ {f}/</button>))}</div></>}
|
||||
</div>
|
||||
) : viewMode === "grid" ? (
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-3">
|
||||
{filtered.map(item => (
|
||||
<div key={item.path} className="group relative bg-[#111] border border-white/5 rounded-xl overflow-hidden hover:border-white/20 transition-all cursor-pointer" onClick={(e) => handleSelect(item, e)}>
|
||||
<div className="aspect-square overflow-hidden bg-black/20">{renderThumb(item)}</div>
|
||||
<div className="p-2"><p className="text-[11px] text-white truncate font-medium">{item.name}</p>
|
||||
<div className="flex items-center justify-between mt-1">{item.type === "folder" ? <span className="text-[9px] text-[#86868B]">{item.childCount} items</span> : <span className={`text-[9px] px-1.5 py-0.5 rounded border ${typeBadge(item.mediaType)}`}>{item.mediaType}</span>}{item.size && <span className="text-[9px] text-[#86868B]">{item.size}</span>}</div>
|
||||
</div>
|
||||
{item.type === "file" && <div className="absolute top-1 right-1 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity"><button onClick={e => { e.stopPropagation(); copyPath(item); }} className="p-1.5 bg-black/70 backdrop-blur-sm rounded-lg text-[#86868B] hover:text-white">{copiedPath === item.path ? <Check size={11} className="text-emerald-400" /> : <Copy size={11} />}</button><button onClick={e => { e.stopPropagation(); deleteFile(item.path, item.name); }} className="p-1.5 bg-black/70 backdrop-blur-sm rounded-lg text-[#86868B] hover:text-red-400"><Trash2 size={11} /></button></div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">{filtered.map(item => (
|
||||
<div key={item.path} className="group flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-white/[0.03] cursor-pointer" onClick={(e) => handleSelect(item, e)}>
|
||||
<div className="w-8 h-8 rounded-lg overflow-hidden shrink-0 border border-white/5">{renderThumb(item)}</div>
|
||||
<span className="text-sm text-white flex-1 truncate">{item.name}</span>
|
||||
{item.type === "file" && <span className={`text-[9px] px-2 py-0.5 rounded border shrink-0 ${typeBadge(item.mediaType)}`}>{item.extension}</span>}
|
||||
{item.type === "folder" && <><span className="text-[9px] text-[#86868B]">{item.childCount} items</span><ChevronRight size={14} className="text-[#86868B]/50" /></>}
|
||||
{item.size && <span className="text-[10px] text-[#86868B] w-16 text-right shrink-0">{item.size}</span>}
|
||||
</div>
|
||||
))}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="px-6 py-3 border-t border-white/10 flex items-center justify-between text-[10px] text-[#86868B] shrink-0 bg-black/20"><span>{filtered.length} items • Click to select</span><span className="font-mono">Drag & drop</span></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// MARKDOWN EDITOR — Cyan-themed for News articles
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
function MarkdownEditorCyan({ name, defaultValue = "", required, rows = 12, placeholder, slug }: {
|
||||
name: string; defaultValue?: string; required?: boolean; rows?: number; placeholder?: string; slug?: string;
|
||||
}) {
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const [value, setValue] = useState(defaultValue);
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [showInsertMenu, setShowInsertMenu] = useState(false);
|
||||
const [history, setHistory] = useState<string[]>([defaultValue]);
|
||||
const [historyIndex, setHistoryIndex] = useState(0);
|
||||
const insertMenuRef = useRef<HTMLDivElement>(null);
|
||||
const [isAssetManagerOpen, setIsAssetManagerOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const h = (e: MouseEvent) => { if (insertMenuRef.current && !insertMenuRef.current.contains(e.target as Node)) setShowInsertMenu(false); };
|
||||
document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h);
|
||||
}, []);
|
||||
|
||||
const historyTimeout = useRef<NodeJS.Timeout | null>(null);
|
||||
const pushHistory = useCallback((v: string) => {
|
||||
if (historyTimeout.current) clearTimeout(historyTimeout.current);
|
||||
historyTimeout.current = setTimeout(() => { setHistory(p => [...p.slice(0, historyIndex + 1), v].slice(-50)); setHistoryIndex(p => Math.min(p + 1, 49)); }, 500);
|
||||
}, [historyIndex]);
|
||||
|
||||
const handleChange = (v: string) => { setValue(v); pushHistory(v); };
|
||||
const undo = () => { if (historyIndex > 0) { const i = historyIndex - 1; setHistoryIndex(i); setValue(history[i]); } };
|
||||
const redo = () => { if (historyIndex < history.length - 1) { const i = historyIndex + 1; setHistoryIndex(i); setValue(history[i]); } };
|
||||
|
||||
const getSelection = () => { const ta = textareaRef.current; if (!ta) return { start: 0, end: 0, selected: "", before: "", after: "" }; return { start: ta.selectionStart, end: ta.selectionEnd, selected: value.substring(ta.selectionStart, ta.selectionEnd), before: value.substring(0, ta.selectionStart), after: value.substring(ta.selectionEnd) }; };
|
||||
const replaceSelection = (t: string, o?: number) => { const { before, after } = getSelection(); handleChange(before + t + after); const p = o !== undefined ? before.length + o : before.length + t.length; setTimeout(() => { const ta = textareaRef.current; if (ta) { ta.focus(); ta.setSelectionRange(p, p); } }, 0); };
|
||||
const wrapSelection = (pre: string, suf: string) => { const { selected } = getSelection(); if (selected) replaceSelection(pre + selected + suf); else replaceSelection(pre + "text" + suf, pre.length); };
|
||||
const insertAtCursor = (t: string, o?: number) => replaceSelection(t, o);
|
||||
const prependLine = (pre: string) => { const { start, selected } = getSelection(); const ls = value.lastIndexOf('\n', start - 1) + 1; const bef = value.substring(0, ls); const line = selected || value.substring(ls).split('\n')[0]; const aft = value.substring(ls + line.length); handleChange(bef + pre + line + aft); setTimeout(() => { const ta = textareaRef.current; if (ta) { ta.focus(); ta.setSelectionRange(ls + pre.length, ls + pre.length + line.length); } }, 0); };
|
||||
|
||||
const handleAssetInsert = (item: { publicUrl: string; mediaType: string; name: string }) => {
|
||||
const syntax = item.mediaType === "image" ? "![" + item.name + "](" + item.publicUrl + ")" : "[" + item.name + "](" + item.publicUrl + ")";
|
||||
insertAtCursor("\n" + syntax + "\n");
|
||||
};
|
||||
|
||||
const basePath = "/news/" + (slug || "slug");
|
||||
const actions = {
|
||||
bold: () => wrapSelection("**", "**"), italic: () => wrapSelection("*", "*"),
|
||||
h1: () => prependLine("# "), h2: () => prependLine("## "), h3: () => prependLine("### "),
|
||||
quote: () => prependLine("> "),
|
||||
ul: () => insertAtCursor("\n- Item 1\n- Item 2\n- Item 3\n", 3),
|
||||
ol: () => insertAtCursor("\n1. First\n2. Second\n3. Third\n", 4),
|
||||
hr: () => insertAtCursor("\n---\n"),
|
||||
table: () => insertAtCursor("\n| Feature | Previous | FLUX Update |\n|---|---|---|\n| Speed | 10 mt/min | 20 mt/min |\n", 2),
|
||||
image: () => insertAtCursor("\n![Image description](" + basePath + "/image.jpg)\n", 3),
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
const m = e.metaKey || e.ctrlKey;
|
||||
if (m && e.key === 'b') { e.preventDefault(); actions.bold(); }
|
||||
if (m && e.key === 'i') { e.preventDefault(); actions.italic(); }
|
||||
if (m && e.key === 'z') { e.preventDefault(); e.shiftKey ? redo() : undo(); }
|
||||
if (e.key === 'Tab') { e.preventDefault(); insertAtCursor(" "); }
|
||||
};
|
||||
|
||||
const ToolBtn = ({ icon: Icon, label, onClick, className = "" }: { icon: any; label: string; onClick: () => void; className?: string }) => (
|
||||
<button type="button" onClick={onClick} title={label} className={"p-1.5 rounded-lg text-[#86868B] hover:text-white hover:bg-white/10 transition-all active:scale-90 " + className}><Icon size={15} strokeWidth={2} /></button>
|
||||
);
|
||||
const Divider = () => <div className="w-px h-5 bg-white/10 mx-1" />;
|
||||
|
||||
return (
|
||||
<div className={"flex flex-col " + (isExpanded ? "fixed inset-0 z-[60] bg-[#0A0A0A] p-6" : "")}>
|
||||
<input type="hidden" name={name} value={value} />
|
||||
<div className={"flex flex-wrap items-center gap-0.5 px-2 py-1.5 bg-black/60 border border-white/10 rounded-t-xl " + (isExpanded ? "border-b-0 rounded-t-2xl" : "")}>
|
||||
<ToolBtn icon={Bold} label="Bold" onClick={actions.bold} />
|
||||
<ToolBtn icon={Italic} label="Italic" onClick={actions.italic} />
|
||||
<Divider />
|
||||
<ToolBtn icon={Heading1} label="H1" onClick={actions.h1} />
|
||||
<ToolBtn icon={Heading2} label="H2" onClick={actions.h2} />
|
||||
<ToolBtn icon={Heading3} label="H3" onClick={actions.h3} />
|
||||
<Divider />
|
||||
<ToolBtn icon={List} label="Bullet" onClick={actions.ul} />
|
||||
<ToolBtn icon={ListOrdered} label="Numbered" onClick={actions.ol} />
|
||||
<ToolBtn icon={Quote} label="Quote" onClick={actions.quote} />
|
||||
<ToolBtn icon={Table} label="Table" onClick={actions.table} />
|
||||
<ToolBtn icon={Minus} label="HR" onClick={actions.hr} />
|
||||
<Divider />
|
||||
<div className="relative" ref={insertMenuRef}>
|
||||
<button type="button" onClick={() => setShowInsertMenu(!showInsertMenu)} className="flex items-center gap-1 px-2 py-1.5 rounded-lg text-[#00F0FF] hover:bg-[#00F0FF]/10 text-[11px] font-semibold uppercase tracking-wider">
|
||||
<Plus size={13} /> Insert <ChevronDown size={11} className={"transition-transform " + (showInsertMenu ? "rotate-180" : "")} />
|
||||
</button>
|
||||
{showInsertMenu && (
|
||||
<div className="absolute top-full left-0 mt-1 w-52 bg-[#1A1A1A] border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden">
|
||||
<div className="p-1">
|
||||
<button type="button" onClick={() => { actions.image(); setShowInsertMenu(false); }} className="w-full flex items-center gap-3 px-3 py-2.5 text-white/80 hover:text-white hover:bg-white/5 rounded-lg text-left"><div className="p-1.5 bg-emerald-500/15 rounded-lg text-emerald-400"><ImageIcon size={14} /></div><div><p className="text-xs font-medium">Image</p><p className="text-[10px] text-[#86868B]">.jpg .png .webp</p></div></button>
|
||||
<button type="button" onClick={() => { actions.table(); setShowInsertMenu(false); }} className="w-full flex items-center gap-3 px-3 py-2.5 text-white/80 hover:text-white hover:bg-white/5 rounded-lg text-left"><div className="p-1.5 bg-amber-500/15 rounded-lg text-amber-400"><Table size={14} /></div><div><p className="text-xs font-medium">Table</p><p className="text-[10px] text-[#86868B]">Auto-highlight</p></div></button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{slug && (<><Divider /><button type="button" onClick={() => setIsAssetManagerOpen(true)} className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10 text-[11px] font-semibold uppercase tracking-wider"><FolderOpen size={14} /> Assets</button></>)}
|
||||
<div className="flex-1" />
|
||||
<ToolBtn icon={RotateCcw} label="Undo" onClick={undo} className={historyIndex <= 0 ? "opacity-30 pointer-events-none" : ""} />
|
||||
<ToolBtn icon={RotateCw} label="Redo" onClick={redo} className={historyIndex >= history.length - 1 ? "opacity-30 pointer-events-none" : ""} />
|
||||
<Divider />
|
||||
<ToolBtn icon={isExpanded ? Minimize2 : Maximize2} label="Fullscreen" onClick={() => setIsExpanded(!isExpanded)} />
|
||||
</div>
|
||||
<textarea ref={textareaRef} value={value} onChange={e => handleChange(e.target.value)} onKeyDown={handleKeyDown} required={required} rows={isExpanded ? 40 : rows} placeholder={placeholder} className={"w-full bg-black/40 border border-white/10 border-t-0 p-4 text-white font-mono text-sm focus:border-[#00F0FF] outline-none resize-none leading-relaxed " + (isExpanded ? "flex-1 rounded-b-2xl text-base leading-loose" : "rounded-b-xl")} style={{ tabSize: 2 }} />
|
||||
<div className="flex items-center justify-between mt-1.5 px-1">
|
||||
<div className="flex items-center gap-3 text-[10px] text-[#86868B] font-mono"><span>{value.split('\n').length} lines</span><span className="text-white/10">|</span><span>{value.length} chars</span></div>
|
||||
<div className="flex items-center gap-2 text-[10px] text-[#86868B]"><span className="opacity-60">⌘B</span><span className="opacity-60">⌘I</span><span className="opacity-60">Tab</span></div>
|
||||
</div>
|
||||
{!isExpanded && (
|
||||
<div className="bg-[#00F0FF]/5 border border-[#00F0FF]/20 rounded-xl p-4 text-xs text-[#86868B] font-mono leading-relaxed mt-3">
|
||||
<p className="text-[#00F0FF] font-semibold uppercase tracking-widest mb-2 text-[10px]">Markdown Cheat Sheet:</p>
|
||||
<p><strong># Title 1</strong> | <strong>## Title 2</strong> | <strong>**Bold**</strong></p>
|
||||
<p className="mt-1"><strong>- List Item</strong> | <strong>> Blockquote</strong></p>
|
||||
<p className="mt-1 text-white"><strong>![Image](/news/{slug || "slug"}/image.jpg)</strong></p>
|
||||
<div className="mt-3 pt-3 border-t border-[#00F0FF]/10">
|
||||
<p><strong>Tables (Last column highlights):</strong></p>
|
||||
<p>| Feature | Previous | FLUX Update |</p>
|
||||
<p>|---|---|---|</p>
|
||||
<p>| Speed | 10 mt/min | 20 mt/min |</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{slug && <AssetManager scope="news" slug={slug} isOpen={isAssetManagerOpen} onClose={() => setIsAssetManagerOpen(false)} onSelect={handleAssetInsert} accentColor="#00F0FF" />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// MAIN PAGE — News Manager (Inside Flux / Editorial Desk)
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function NewsManager() {
|
||||
const [articles, setArticles] = useState<any[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [editingArticle, setEditingArticle] = useState<any | null>(null);
|
||||
const [gallery, setGallery] = useState<string[]>([]);
|
||||
|
||||
// Asset Manager states
|
||||
const [coverAssetsOpen, setCoverAssetsOpen] = useState(false);
|
||||
const [galleryAssetsOpen, setGalleryAssetsOpen] = useState(false);
|
||||
|
||||
// Derive slug for folder naming
|
||||
const articleSlug = editingArticle?.title?.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)+/g, '') || "new-article";
|
||||
|
||||
const fetchArticles = async () => {
|
||||
setIsLoading(true);
|
||||
const res = await getNewsArticles();
|
||||
if (res.success && res.articles) setArticles(res.articles);
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => { fetchArticles(); }, []);
|
||||
|
||||
const openCreateModal = () => { setEditingArticle(null); setGallery([]); setIsModalOpen(true); };
|
||||
const openEditModal = (article: any) => {
|
||||
setEditingArticle(article);
|
||||
try { setGallery(JSON.parse(article.galleryJson || "[]")); } catch { setGallery([]); }
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleSave = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault(); setIsSubmitting(true); setError("");
|
||||
const formData = new FormData(e.currentTarget);
|
||||
formData.append("galleryJson", JSON.stringify(gallery.filter(img => img.trim() !== "")));
|
||||
let res;
|
||||
if (editingArticle) res = await updateNewsArticle(formData);
|
||||
else res = await createNewsArticle(formData);
|
||||
if (res.error) setError(res.error);
|
||||
else { setIsModalOpen(false); fetchArticles(); }
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (confirm("Delete this article?")) { await deleteNewsArticle(id); fetchArticles(); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-6 md:p-12 max-w-7xl mx-auto">
|
||||
<div className="mb-10">
|
||||
<Link href="/hq-command/dashboard" className="inline-flex items-center gap-2 text-sm text-[#86868B] hover:text-[#00F0FF] transition-colors mb-6 group"><ArrowLeft size={16} className="group-hover:-translate-x-1 transition-transform" /> Back to Command Center</Link>
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
|
||||
<div><h1 className="text-3xl font-light text-white flex items-center gap-3"><Newspaper className="text-[#00F0FF]" /> Inside Flux</h1><p className="text-[#86868B] mt-2">Manage company news, tech updates, and behind-the-scenes articles.</p></div>
|
||||
<button onClick={openCreateModal} className="flex items-center gap-2 bg-[#00F0FF] text-black px-5 py-2.5 rounded-xl font-medium hover:bg-white transition-all"><Plus size={18} /> Write Article</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <div className="mb-8 p-4 bg-red-500/10 border border-red-500/20 rounded-xl text-red-400 text-sm">{error}</div>}
|
||||
|
||||
<div className="bg-[#111] border border-white/5 rounded-3xl overflow-hidden shadow-2xl"><div className="overflow-x-auto"><table className="w-full text-left border-collapse"><thead><tr className="border-b border-white/5 text-[10px] uppercase tracking-widest text-[#86868B] bg-black/40"><th className="p-6 font-semibold">Article / Date</th><th className="p-6 font-semibold text-center">Order</th><th className="p-6 font-semibold">Category</th><th className="p-6 font-semibold text-right">Actions</th></tr></thead>
|
||||
<tbody>
|
||||
{isLoading ? <tr><td colSpan={4} className="p-12 text-center text-[#86868B]"><Loader2 className="animate-spin mx-auto mb-2" size={24} /> Loading editorial database...</td></tr>
|
||||
: articles.length === 0 ? <tr><td colSpan={4} className="p-12 text-center text-[#86868B]">No articles published yet.</td></tr>
|
||||
: articles.map(article => (
|
||||
<tr key={article.id} className="border-b border-white/5 hover:bg-white/[0.02] transition-colors group">
|
||||
<td className="p-6">
|
||||
<div className="flex items-center gap-2 mb-1"><p className="font-medium text-white text-base">{article.title}</p>{article.linkedinUrl && <Linkedin size={14} className="text-[#0A66C2]" />}</div>
|
||||
<p className="text-xs text-[#86868B] max-w-md truncate">{article.excerpt}</p>
|
||||
<span className="text-[10px] text-white/30 uppercase tracking-widest mt-2 block font-mono">{new Date(article.publishedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</span>
|
||||
</td>
|
||||
<td className="p-6 text-center"><span className="text-white/50 bg-white/5 px-3 py-1 rounded font-mono text-sm">{article.order}</span></td>
|
||||
<td className="p-6"><span className="bg-[#00F0FF]/10 text-[#00F0FF] border border-[#00F0FF]/20 px-3 py-1 rounded-full text-[10px] uppercase tracking-wider">{article.category}</span></td>
|
||||
<td className="p-6 text-right"><div className="flex justify-end gap-2"><button onClick={() => openEditModal(article)} className="text-[#86868B] hover:text-[#00F0FF] hover:bg-[#00F0FF]/10 p-2 rounded-lg transition-colors opacity-0 group-hover:opacity-100"><Edit3 size={18} /></button><button onClick={() => handleDelete(article.id)} className="text-[#86868B] hover:text-red-400 hover:bg-red-400/10 p-2 rounded-lg transition-colors opacity-0 group-hover:opacity-100"><Trash2 size={18} /></button></div></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody></table></div></div>
|
||||
|
||||
{/* EDITORIAL DESK MODAL */}
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
|
||||
<div className="bg-[#111] border border-white/10 w-full max-w-4xl rounded-[2rem] p-0 relative shadow-2xl flex flex-col max-h-[90vh]">
|
||||
<div className="p-6 md:p-8 border-b border-white/10 relative">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[#00F0FF] to-transparent"></div>
|
||||
<button onClick={() => setIsModalOpen(false)} className="absolute top-6 right-6 text-[#86868B] hover:text-white"><X size={20} /></button>
|
||||
<h3 className="text-2xl font-light mb-1 text-[#00F0FF] flex items-center gap-2"><Newspaper size={24} /> {editingArticle ? "Edit Article" : "Editorial Desk"}</h3>
|
||||
</div>
|
||||
|
||||
<form id="news-form" onSubmit={handleSave} className="flex-1 overflow-y-auto p-6 md:p-8 [scrollbar-width:none]">
|
||||
<input type="hidden" name="id" value={editingArticle?.id || ""} />
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div className="md:col-span-3"><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Article Title</label><input name="title" defaultValue={editingArticle?.title} required className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-lg font-medium focus:border-[#00F0FF] outline-none" /></div>
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Display Order</label><input name="order" type="number" defaultValue={editingArticle?.order || 0} required className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-lg font-medium focus:border-[#00F0FF] outline-none text-center" /></div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Category</label><select name="category" defaultValue={editingArticle?.category} className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-[#00F0FF] outline-none appearance-none"><option value="Inside Flux">Inside Flux</option><option value="Tech Update">Tech Update</option><option value="Event">Event / Tradeshow</option></select></div>
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Cover Image — public/news</label>
|
||||
<div className="flex gap-2">
|
||||
<input name="coverImage" defaultValue={editingArticle?.coverImage} className="flex-1 bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-[#00F0FF] font-mono text-sm focus:border-[#00F0FF] outline-none" />
|
||||
<button type="button" onClick={() => setCoverAssetsOpen(true)} className="flex items-center gap-1.5 px-3 py-3 text-xs text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 rounded-xl hover:bg-emerald-500/20 shrink-0"><FolderOpen size={14} /></button>
|
||||
</div>
|
||||
</div>
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5 flex items-center gap-1"><Linkedin size={10}/> LinkedIn URL</label><input name="linkedinUrl" defaultValue={editingArticle?.linkedinUrl} placeholder="https://linkedin.com/..." className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-[#00F0FF] outline-none" /></div>
|
||||
</div>
|
||||
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Short Excerpt (Summary)</label><textarea name="excerpt" defaultValue={editingArticle?.excerpt} required rows={2} className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-[#00F0FF] outline-none resize-none" /></div>
|
||||
|
||||
{/* RICH MARKDOWN EDITOR */}
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-2 flex justify-between"><span>Full Content (Markdown)</span><span className="text-[#00F0FF]/60 text-[9px] font-normal normal-case">Rich Editor + Assets</span></label>
|
||||
<MarkdownEditorCyan name="content" defaultValue={editingArticle?.content || ""} required rows={12} placeholder="Write the article here..." slug={articleSlug} />
|
||||
</div>
|
||||
|
||||
{/* MEDIA GALLERY */}
|
||||
<div className="bg-black/20 border border-white/5 p-4 rounded-xl">
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-3">Media Gallery — public/news</label>
|
||||
<div className="space-y-3 mb-3">
|
||||
{gallery.map((img, idx) => (
|
||||
<div key={idx} className="flex gap-2">
|
||||
<input value={img} onChange={e => { const n = [...gallery]; n[idx] = e.target.value; setGallery(n); }} className="flex-1 bg-black/60 border border-white/10 rounded-lg px-4 py-2 text-[#00F0FF] font-mono text-sm focus:border-[#00F0FF] outline-none" />
|
||||
<button type="button" onClick={() => setGallery(gallery.filter((_, i) => i !== idx))} className="text-[#86868B] hover:text-red-400 px-3 bg-black/40 rounded-lg"><Trash2 size={14}/></button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button type="button" onClick={() => setGallery([...gallery, ""])} className="flex-1 border border-dashed border-white/20 text-[#86868B] hover:text-white hover:border-[#00F0FF] py-3 rounded-lg flex justify-center items-center gap-2 text-xs uppercase tracking-widest"><Plus size={14} /> Add Gallery Image</button>
|
||||
<button type="button" onClick={() => setGalleryAssetsOpen(true)} className="flex items-center gap-1.5 px-4 py-3 text-xs text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 rounded-lg hover:bg-emerald-500/20 font-medium shrink-0"><FolderOpen size={14} /> Browse Assets</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI SWITCH */}
|
||||
<div className="bg-gradient-to-r from-[#00F0FF]/10 to-transparent border border-[#00F0FF]/20 p-4 rounded-xl flex items-center justify-between mt-6">
|
||||
<div className="flex items-center gap-3"><div className="p-2 bg-[#00F0FF]/20 rounded-lg text-[#00F0FF]"><Sparkles size={18} /></div><div><p className="text-sm text-white font-medium">Flux AI Auto-Translate</p><p className="text-[10px] text-[#86868B] uppercase tracking-widest mt-0.5">IT, VEC, ES, DE</p></div></div>
|
||||
<label className="relative inline-flex items-center cursor-pointer"><input type="checkbox" name="autoTranslate" defaultChecked className="sr-only peer" /><div className="w-11 h-6 bg-black/50 border border-white/10 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#00F0FF]"></div></label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Asset Managers OUTSIDE the form */}
|
||||
<AssetManager scope="news" slug={articleSlug} isOpen={coverAssetsOpen} onClose={() => setCoverAssetsOpen(false)} onSelect={(item) => {
|
||||
const inp = document.querySelector('input[name="coverImage"]') as HTMLInputElement;
|
||||
if (inp) { inp.value = item.name; inp.dispatchEvent(new Event('input', { bubbles: true })); }
|
||||
}} accentColor="#00F0FF" />
|
||||
<AssetManager scope="news" slug={articleSlug} isOpen={galleryAssetsOpen} onClose={() => setGalleryAssetsOpen(false)} onSelect={(item) => {
|
||||
setGallery(prev => [...prev, item.name]);
|
||||
}} accentColor="#00F0FF" />
|
||||
|
||||
<div className="p-6 border-t border-white/10 bg-[#111] rounded-b-[2rem] flex justify-end gap-3">
|
||||
<button type="button" onClick={() => setIsModalOpen(false)} className="px-5 py-3 text-sm font-medium text-[#86868B] hover:text-white">Cancel</button>
|
||||
<button onClick={() => (document.getElementById("news-form") as HTMLFormElement) ?.requestSubmit()} disabled={isSubmitting} className="flex items-center gap-2 bg-[#00F0FF] text-black px-8 py-3 rounded-xl text-sm font-semibold hover:bg-white disabled:opacity-50 shadow-[0_0_15px_rgba(0,240,255,0.3)]">{isSubmitting ? <><Loader2 size={18} className="animate-spin" /> Processing AI...</> : (editingArticle ? "Save & Sync" : "Publish to World")}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,193 @@
|
||||
// src/app/hq-command/dashboard/page.tsx
|
||||
// ✅ CORRECCIÓN: Forzamos renderizado dinámico para que Prisma funcione en producción
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Globe,
|
||||
Layers,
|
||||
Users,
|
||||
ShieldCheck,
|
||||
Activity,
|
||||
History,
|
||||
Newspaper,
|
||||
BookOpen,
|
||||
LogOut,
|
||||
Radar,
|
||||
Wrench,
|
||||
Server
|
||||
} from "lucide-react";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { logoutAdmin } from "@/app/hq-command/login/actions";
|
||||
|
||||
export const revalidate = 0;
|
||||
|
||||
export default async function DashboardPage() {
|
||||
const nodesCount = await prisma.globalNode.count({ where: { isActive: true } });
|
||||
const appsCount = await prisma.application.count({ where: { isActive: true } });
|
||||
|
||||
const modules = [
|
||||
{
|
||||
title: "Global Network",
|
||||
description: "Manage physical installations, nodes, and events on the 3D Holographic Map.",
|
||||
icon: Globe,
|
||||
href: "/hq-command/dashboard/network",
|
||||
color: "text-[#00F0FF]",
|
||||
bg: "bg-[#00F0FF]/10",
|
||||
border: "hover:border-[#00F0FF]/50"
|
||||
},
|
||||
{
|
||||
title: "Knowledge Base",
|
||||
description: "Edit technical literature, datasheets, and applications content dynamically.",
|
||||
icon: Layers,
|
||||
href: "/hq-command/dashboard/applications",
|
||||
color: "text-purple-400",
|
||||
bg: "bg-purple-500/10",
|
||||
border: "hover:border-purple-500/50"
|
||||
},
|
||||
{
|
||||
title: "Company Legacy",
|
||||
description: "Manage the historical timeline, milestones, and Patrizio's story.",
|
||||
icon: History,
|
||||
href: "/hq-command/dashboard/timeline",
|
||||
color: "text-amber-400",
|
||||
bg: "bg-amber-400/10",
|
||||
border: "hover:border-amber-400/50"
|
||||
},
|
||||
{
|
||||
title: "Inside Flux",
|
||||
description: "Manage company news, tech updates, and broadcast to LinkedIn.",
|
||||
icon: Newspaper,
|
||||
href: "/hq-command/dashboard/news",
|
||||
color: "text-[#0A66C2]",
|
||||
bg: "bg-[#0A66C2]/10",
|
||||
border: "hover:border-[#0A66C2]/50"
|
||||
},
|
||||
{
|
||||
title: "Our Heritage",
|
||||
description: "Build the deep history page block by block (Text, Images, Video).",
|
||||
icon: BookOpen,
|
||||
href: "/hq-command/dashboard/heritage",
|
||||
color: "text-white",
|
||||
bg: "bg-white/10",
|
||||
border: "hover:border-white/50"
|
||||
},
|
||||
{
|
||||
title: "Component Matrix",
|
||||
description: "Manage the spare parts catalog, pricing, and SKUs.",
|
||||
icon: Wrench,
|
||||
href: "/hq-command/dashboard/parts",
|
||||
color: "text-amber-500",
|
||||
bg: "bg-amber-500/10",
|
||||
border: "hover:border-amber-500/50"
|
||||
},
|
||||
{
|
||||
title: "Signal Hub (Inbox)",
|
||||
description: "Manage component orders, technical diagnostics, and AI consultations.",
|
||||
icon: Radar,
|
||||
href: "/hq-command/dashboard/inbox",
|
||||
color: "text-rose-500",
|
||||
bg: "bg-rose-500/10",
|
||||
border: "hover:border-rose-500/50"
|
||||
},
|
||||
{
|
||||
title: "Access Control",
|
||||
description: "Create and manage administrator accounts and security credentials.",
|
||||
icon: Users,
|
||||
href: "/hq-command/dashboard/users",
|
||||
color: "text-emerald-400",
|
||||
bg: "bg-emerald-500/10",
|
||||
border: "hover:border-emerald-500/50"
|
||||
},
|
||||
{
|
||||
title: "System Health",
|
||||
description: "Monitor server metrics, database connection, and manage secure data backups.",
|
||||
icon: Server,
|
||||
href: "/hq-command/dashboard/health",
|
||||
color: "text-blue-400",
|
||||
bg: "bg-blue-400/10",
|
||||
border: "hover:border-blue-400/50"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-6 md:p-12 max-w-7xl mx-auto">
|
||||
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mb-10">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 text-[#00F0FF] mb-2">
|
||||
<ShieldCheck size={16} />
|
||||
<span className="text-[10px] uppercase tracking-widest font-bold">Secure Connection</span>
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-light text-white tracking-tight">
|
||||
Welcome back, <span className="font-medium">Davidherran.</span>
|
||||
</h1>
|
||||
<p className="text-[#86868B] mt-2">FLUX Central Command System is online.</p>
|
||||
</div>
|
||||
|
||||
<form action={logoutAdmin}>
|
||||
<button type="submit" className="flex items-center gap-2 text-sm text-[#86868B] hover:text-white border border-white/10 px-4 py-2 rounded-lg transition-colors hover:bg-white/5">
|
||||
<LogOut size={16} /> Terminate Session
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-12">
|
||||
<div className="bg-[#111] border border-white/5 p-6 rounded-2xl flex items-center justify-between shadow-lg">
|
||||
<div>
|
||||
<span className="text-[10px] uppercase tracking-widest text-[#86868B] block mb-1">System Status</span>
|
||||
<div className="flex items-center gap-2 text-emerald-400">
|
||||
<span className="relative flex h-2.5 w-2.5">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
|
||||
</span>
|
||||
<span className="text-xl font-medium">Optimal</span>
|
||||
</div>
|
||||
</div>
|
||||
<Activity size={32} className="text-white/5" />
|
||||
</div>
|
||||
|
||||
<div className="bg-[#111] border border-white/5 p-6 rounded-2xl flex items-center justify-between shadow-lg">
|
||||
<div>
|
||||
<span className="text-[10px] uppercase tracking-widest text-[#86868B] block mb-1">Active Map Nodes</span>
|
||||
<span className="text-xl font-medium text-white">{nodesCount} Deployments</span>
|
||||
</div>
|
||||
<Globe size={32} className="text-white/5" />
|
||||
</div>
|
||||
|
||||
<div className="bg-[#111] border border-white/5 p-6 rounded-2xl flex items-center justify-between shadow-lg">
|
||||
<div>
|
||||
<span className="text-[10px] uppercase tracking-widest text-[#86868B] block mb-1">Total Applications</span>
|
||||
<span className="text-xl font-medium text-white">{appsCount} Categories</span>
|
||||
</div>
|
||||
<Layers size={32} className="text-white/5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<span className="text-[10px] uppercase tracking-widest text-[#86868B] font-semibold">Core Modules</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{modules.map((module, idx) => (
|
||||
<Link
|
||||
key={idx}
|
||||
href={module.href}
|
||||
className="group bg-[#111] border border-white/5 p-8 rounded-3xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
|
||||
>
|
||||
<div className={`w-12 h-12 rounded-2xl ${module.bg} ${module.color} flex items-center justify-center mb-6 transition-transform group-hover:scale-110`}>
|
||||
<module.icon size={24} />
|
||||
</div>
|
||||
<h3 className="text-xl font-medium text-white mb-2 flex items-center gap-2">
|
||||
{module.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[#86868B] leading-relaxed">
|
||||
{module.description}
|
||||
</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
"use server";
|
||||
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { translateContentForCMS } from "@/lib/aiTranslator";
|
||||
import { revalidatePath } from "next/cache";
|
||||
|
||||
export async function getParts() {
|
||||
try {
|
||||
const parts = await prisma.sparePart.findMany({
|
||||
orderBy: { createdAt: "desc" },
|
||||
});
|
||||
return { success: true, parts };
|
||||
} catch (error) {
|
||||
console.error("Error fetching parts:", error);
|
||||
return { error: "Error loading component matrix." };
|
||||
}
|
||||
}
|
||||
|
||||
export async function createPart(formData: FormData) {
|
||||
try {
|
||||
const sku = formData.get("sku") as string;
|
||||
const title = formData.get("title") as string;
|
||||
|
||||
if (!sku || !title) return { error: "SKU and Title are required" };
|
||||
|
||||
const newPart = await prisma.sparePart.create({
|
||||
data: {
|
||||
sku: sku.toUpperCase().replace(/\s+/g, '-'),
|
||||
title,
|
||||
description: "Draft description...", // Texto por defecto
|
||||
},
|
||||
});
|
||||
|
||||
revalidatePath("/hq-command/dashboard/parts");
|
||||
return { success: true, part: newPart };
|
||||
} catch (error: any) {
|
||||
if (error.code === 'P2002') return { error: "A component with this SKU already exists." };
|
||||
return { error: "Error creating component." };
|
||||
}
|
||||
}
|
||||
|
||||
export async function updatePart(formData: FormData) {
|
||||
try {
|
||||
const id = formData.get("id") as string;
|
||||
const title = formData.get("title") as string;
|
||||
const sku = formData.get("sku") as string;
|
||||
const description = formData.get("description") as string;
|
||||
|
||||
// Lógica de Pricing
|
||||
const rawPrice = formData.get("price") as string;
|
||||
const price = rawPrice ? parseFloat(rawPrice) : null;
|
||||
const showPrice = formData.get("showPrice") === "on";
|
||||
const autoTranslate = formData.get("autoTranslate") === "on";
|
||||
|
||||
// JSONs
|
||||
const mediaJson = formData.get("mediaJson") as string;
|
||||
const specsJson = formData.get("specsJson") as string;
|
||||
|
||||
let updateData: any = {
|
||||
title,
|
||||
sku: sku.toUpperCase().replace(/\s+/g, '-'),
|
||||
description,
|
||||
price,
|
||||
showPrice,
|
||||
mediaJson,
|
||||
specsJson,
|
||||
};
|
||||
|
||||
// 🔥 MAGIA: Autotraducción con Flux AI si está activada
|
||||
if (autoTranslate) {
|
||||
const translations = await translateContentForCMS({ title, description });
|
||||
if (translations) {
|
||||
updateData.translationsJson = JSON.stringify(translations);
|
||||
}
|
||||
}
|
||||
|
||||
await prisma.sparePart.update({
|
||||
where: { id },
|
||||
data: updateData,
|
||||
});
|
||||
|
||||
revalidatePath("/hq-command/dashboard/parts");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error("Error updating part:", error);
|
||||
return { error: "Failed to update component data." };
|
||||
}
|
||||
}
|
||||
|
||||
export async function deletePart(id: string) {
|
||||
try {
|
||||
await prisma.sparePart.delete({ where: { id } });
|
||||
revalidatePath("/hq-command/dashboard/parts");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: "Failed to delete component." };
|
||||
}
|
||||
}
|
||||
|
||||
export async function togglePartStatus(id: string, currentStatus: boolean) {
|
||||
try {
|
||||
await prisma.sparePart.update({
|
||||
where: { id },
|
||||
data: { isActive: !currentStatus },
|
||||
});
|
||||
revalidatePath("/hq-command/dashboard/parts");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: "Failed to toggle status." };
|
||||
}
|
||||
}
|
||||
|
||||
// 6. OBTENER EL ENCABEZADO DEL CATÁLOGO
|
||||
export async function getPartsCatalogHero() {
|
||||
try {
|
||||
const content = await prisma.pageContent.findUnique({ where: { slug: "parts-catalog" } });
|
||||
return { success: true, content };
|
||||
} catch (error) {
|
||||
return { error: "Failed to load hero content." };
|
||||
}
|
||||
}
|
||||
|
||||
// 7. GUARDAR EL ENCABEZADO DEL CATÁLOGO (CON TRADUCCIÓN IA)
|
||||
export async function updatePartsCatalogHero(formData: FormData) {
|
||||
const title = formData.get("title") as string;
|
||||
const subtitle = formData.get("subtitle") as string;
|
||||
const description = formData.get("description") as string;
|
||||
const autoTranslate = formData.get("autoTranslate") === "on";
|
||||
|
||||
try {
|
||||
let updateData: any = { title, subtitle, description };
|
||||
|
||||
// Si la IA está activa, traducimos los 3 campos a los 4 idiomas
|
||||
if (autoTranslate) {
|
||||
const translations = await translateContentForCMS({ title, subtitle, description });
|
||||
if (translations) updateData.translationsJson = JSON.stringify(translations);
|
||||
}
|
||||
|
||||
// Usamos Upsert: Crea el registro si no existe, o lo actualiza si ya existe
|
||||
await prisma.pageContent.upsert({
|
||||
where: { slug: "parts-catalog" },
|
||||
update: updateData,
|
||||
create: { slug: "parts-catalog", ...updateData }
|
||||
});
|
||||
|
||||
revalidatePath("/hq-command/dashboard/parts");
|
||||
revalidatePath("/[locale]/parts", "page"); // Limpia la caché de la vista pública
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: "Failed to update hero content." };
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,428 @@
|
||||
//src/app/hq-command/dashboard/parts/page.tsx
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
ArrowLeft, Wrench, Plus, Trash2, Loader2, X, Eye, EyeOff, Edit3, Sparkles, DollarSign,
|
||||
Bold, Italic, Heading1, Heading2, Heading3, List, ListOrdered, Quote, Table, Minus,
|
||||
RotateCcw, RotateCw, Maximize2, Minimize2, ChevronDown,
|
||||
FolderOpen, Upload, FolderPlus, ChevronRight, File, ArrowUpFromLine,
|
||||
Grid3X3, LayoutList, Copy, Check, Image as ImageIcon, Video, Box, Search, Tag
|
||||
} from "lucide-react";
|
||||
import { getParts, createPart, updatePart, deletePart, togglePartStatus, getPartsCatalogHero, updatePartsCatalogHero } from "./actions";
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// ASSET MANAGER — Reusable (scope=parts, /public/parts/{sku}/)
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
interface AssetItem { name: string; type: "file"|"folder"; mediaType?: string; extension?: string; path: string; publicUrl?: string; size?: string; childCount?: number; }
|
||||
interface AssetManagerProps { slug: string; scope?: string; isOpen: boolean; onClose: () => void; onSelect: (item: { name: string; publicUrl: string; mediaType: string; path: string }) => void; accentColor?: string; initialPath?: string; }
|
||||
|
||||
function AssetManager({ slug, scope = "parts", isOpen, onClose, onSelect, accentColor = "#f59e0b", initialPath = "" }: AssetManagerProps) {
|
||||
const [currentPath, setCurrentPath] = useState(initialPath);
|
||||
const [items, setItems] = useState<AssetItem[]>([]);
|
||||
const [breadcrumbs, setBreadcrumbs] = useState<{name: string; path: string}[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string|null>(null);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [uploadProgress, setUploadProgress] = useState("");
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [showNewFolder, setShowNewFolder] = useState(false);
|
||||
const [newFolderName, setNewFolderName] = useState("");
|
||||
const [viewMode, setViewMode] = useState<"grid"|"list">("grid");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [copiedPath, setCopiedPath] = useState<string|null>(null);
|
||||
|
||||
const fetchAssets = useCallback(async (dirPath: string = "") => {
|
||||
setIsLoading(true); setError(null);
|
||||
try {
|
||||
const params = new URLSearchParams({ scope, slug, path: dirPath });
|
||||
const res = await fetch(`/api/assets?${params}`);
|
||||
const data = await res.json();
|
||||
if (data.success) { setItems(data.items); setBreadcrumbs(data.breadcrumbs); setCurrentPath(dirPath); }
|
||||
else setError(data.error);
|
||||
} catch { setError("Connection error"); }
|
||||
setIsLoading(false);
|
||||
}, [scope, slug]);
|
||||
|
||||
useEffect(() => { if (isOpen) { fetchAssets(initialPath || currentPath); setSearchQuery(""); } }, [isOpen]); // eslint-disable-line
|
||||
|
||||
const uploadFile = async (file: File) => {
|
||||
setIsUploading(true); setUploadProgress(`Uploading ${file.name}...`);
|
||||
try {
|
||||
const fd = new FormData(); fd.append("scope", scope); fd.append("slug", slug); fd.append("path", currentPath); fd.append("file", file);
|
||||
const res = await fetch("/api/assets", { method: "POST", body: fd });
|
||||
const data = await res.json();
|
||||
if (data.success) { setUploadProgress("✓ " + data.file.name); await fetchAssets(currentPath); setTimeout(() => setUploadProgress(""), 2000); }
|
||||
else { setUploadProgress("✗ " + data.error); setTimeout(() => setUploadProgress(""), 4000); }
|
||||
} catch { setUploadProgress("✗ Failed"); setTimeout(() => setUploadProgress(""), 3000); }
|
||||
setIsUploading(false);
|
||||
};
|
||||
|
||||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => { if (e.target.files) Array.from(e.target.files).forEach(uploadFile); e.target.value = ""; };
|
||||
const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(true); };
|
||||
const handleDragLeave = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(false); };
|
||||
const handleDrop = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(false); if (e.dataTransfer.files.length > 0) Array.from(e.dataTransfer.files).forEach(uploadFile); };
|
||||
const createFolder = async () => { if (!newFolderName.trim()) return; try { const res = await fetch("/api/assets", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ scope, slug, folderName: newFolderName, parentPath: currentPath }) }); const data = await res.json(); if (data.success) { setShowNewFolder(false); setNewFolderName(""); await fetchAssets(currentPath); } else alert(data.error); } catch { alert("Error"); } };
|
||||
const deleteFile = async (fp: string, fn: string) => { if (!confirm('Delete "'+fn+'"?')) return; try { const res = await fetch("/api/assets", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ scope, slug, filePath: fp }) }); const data = await res.json(); if (data.success) await fetchAssets(currentPath); else alert(data.error); } catch { alert("Failed"); } };
|
||||
|
||||
const handleSelect = (item: AssetItem, e?: React.MouseEvent) => {
|
||||
if (e) { e.preventDefault(); e.stopPropagation(); }
|
||||
if (item.type === "folder") { fetchAssets(item.path); return; }
|
||||
onSelect({ name: item.name, publicUrl: item.publicUrl || "/"+scope+"/"+slug+"/"+item.path, mediaType: item.mediaType || "unknown", path: item.path });
|
||||
onClose();
|
||||
};
|
||||
|
||||
const copyPath = (item: AssetItem) => { navigator.clipboard.writeText(item.publicUrl || "/"+scope+"/"+slug+"/"+item.path); setCopiedPath(item.path); setTimeout(() => setCopiedPath(null), 1500); };
|
||||
const filtered = searchQuery ? items.filter(i => i.name.toLowerCase().includes(searchQuery.toLowerCase())) : items;
|
||||
const typeBadge = (mt?: string) => ({ image: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20", video: "bg-blue-500/10 text-blue-400 border-blue-500/20", model: "bg-purple-500/10 text-purple-400 border-purple-500/20" }[mt || ""] || "bg-white/5 text-[#86868B] border-white/10");
|
||||
const renderThumb = (item: AssetItem) => {
|
||||
if (item.type === "folder") return <div className="w-full h-full flex items-center justify-center bg-white/[0.02]"><FolderOpen size={28} style={{ color: accentColor, opacity: 0.7 }} /></div>;
|
||||
if (item.mediaType === "image" && item.publicUrl) return <img src={item.publicUrl} alt={item.name} className="w-full h-full object-cover" loading="lazy" />;
|
||||
return <div className="w-full h-full flex items-center justify-center bg-white/[0.02]"><File size={24} className="text-[#86868B]/50" /></div>;
|
||||
};
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[70] flex items-center justify-center p-4 bg-black/85 backdrop-blur-md" onClick={e => { e.preventDefault(); e.stopPropagation(); }}>
|
||||
<div className="bg-[#0D0D0D] border border-white/10 w-full max-w-4xl rounded-[2rem] shadow-2xl flex flex-col max-h-[85vh] relative overflow-hidden" onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop} onClick={e => e.stopPropagation()}>
|
||||
{isDragging && <div className="absolute inset-0 z-50 border-2 border-dashed rounded-[2rem] flex items-center justify-center backdrop-blur-sm" style={{ borderColor: accentColor+"80", background: accentColor+"15" }}><div className="text-center"><ArrowUpFromLine size={48} style={{ color: accentColor }} className="mx-auto mb-3 animate-bounce" /><p style={{ color: accentColor }} className="font-medium text-lg">Drop files</p></div></div>}
|
||||
<div className="px-6 py-5 border-b border-white/10 shrink-0">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3"><div className="p-2 rounded-xl" style={{ background: accentColor+"20", color: accentColor }}><FolderOpen size={20} /></div><div><h3 className="text-lg font-medium text-white">Asset Manager</h3><p className="text-[10px] text-[#86868B] uppercase tracking-widest font-mono">/public/{scope}/{slug}/</p></div></div>
|
||||
<button onClick={onClose} className="text-[#86868B] hover:text-white p-2 hover:bg-white/5 rounded-xl"><X size={20} /></button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-1 text-sm overflow-x-auto [scrollbar-width:none] flex-1 min-w-0">{breadcrumbs.map((c, i) => (<span key={i} className="flex items-center shrink-0">{i > 0 && <ChevronRight size={12} className="text-[#86868B]/50 mx-0.5" />}<button onClick={() => fetchAssets(c.path)} className={`px-2 py-1 rounded-lg text-xs ${i === breadcrumbs.length-1 ? "bg-white/10" : "text-[#86868B] hover:text-white hover:bg-white/5"}`} style={i === breadcrumbs.length-1 ? { color: accentColor } : {}}>{c.name}</button></span>))}</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<div className="relative"><Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[#86868B]" /><input value={searchQuery} onChange={e => setSearchQuery(e.target.value)} placeholder="Filter..." className="bg-white/5 border border-white/10 rounded-lg pl-8 pr-3 py-1.5 text-xs text-white w-32 focus:w-48 transition-all outline-none" /></div>
|
||||
<button onClick={() => setShowNewFolder(!showNewFolder)} className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-[#86868B] hover:text-white bg-white/5 border border-white/10 rounded-lg"><FolderPlus size={13} /> Folder</button>
|
||||
<button onClick={() => fileInputRef.current?.click()} disabled={isUploading} className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-black rounded-lg font-medium disabled:opacity-50" style={{ background: accentColor }}><Upload size={13} /> Upload</button>
|
||||
<input ref={fileInputRef} type="file" multiple accept=".jpg,.jpeg,.png,.webp,.gif,.svg,.avif,.pdf" onChange={handleFileSelect} className="hidden" />
|
||||
</div>
|
||||
</div>
|
||||
{showNewFolder && <div className="flex items-center gap-2 mt-3 pt-3 border-t border-white/5"><FolderPlus size={14} style={{ color: accentColor }} /><input value={newFolderName} onChange={e => setNewFolderName(e.target.value)} onKeyDown={e => { if (e.key === "Enter") createFolder(); if (e.key === "Escape") { setShowNewFolder(false); setNewFolderName(""); } }} placeholder="folder-name" autoFocus className="flex-1 bg-black/40 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-white outline-none font-mono" /><button onClick={createFolder} className="px-3 py-1.5 text-xs text-black rounded-lg font-medium" style={{ background: accentColor }}>Create</button><button onClick={() => { setShowNewFolder(false); setNewFolderName(""); }} className="px-3 py-1.5 text-xs text-[#86868B]">Cancel</button></div>}
|
||||
{uploadProgress && <div className="mt-3 pt-3 border-t border-white/5 flex items-center gap-2 text-xs">{isUploading && <Loader2 size={12} className="animate-spin" style={{ color: accentColor }} />}<span className={uploadProgress.startsWith("✓") ? "text-emerald-400" : uploadProgress.startsWith("✗") ? "text-red-400" : ""} style={isUploading ? { color: accentColor } : {}}>{uploadProgress}</span></div>}
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-4 [scrollbar-width:none]">
|
||||
{isLoading ? <div className="flex items-center justify-center py-20"><Loader2 size={24} className="animate-spin" style={{ color: accentColor }} /></div>
|
||||
: error ? <div className="text-center py-20"><X size={32} className="text-red-400/50 mx-auto mb-3" /><p className="text-red-400/80 text-sm">{error}</p></div>
|
||||
: filtered.length === 0 ? <div className="text-center py-20"><FolderOpen size={48} className="text-[#86868B]/20 mx-auto mb-4" />{searchQuery ? <p className="text-[#86868B] text-sm">No matches</p> : <p className="text-[#86868B] text-sm">Empty — upload product photos here</p>}</div>
|
||||
: <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-3">{filtered.map(item => (
|
||||
<div key={item.path} className="group relative bg-[#111] border border-white/5 rounded-xl overflow-hidden hover:border-white/20 cursor-pointer" onClick={e => handleSelect(item, e)}>
|
||||
<div className="aspect-square overflow-hidden bg-black/20">{renderThumb(item)}</div>
|
||||
<div className="p-2"><p className="text-[11px] text-white truncate font-medium">{item.name}</p><div className="flex items-center justify-between mt-1">{item.type === "folder" ? <span className="text-[9px] text-[#86868B]">{item.childCount} items</span> : <span className={`text-[9px] px-1.5 py-0.5 rounded border ${typeBadge(item.mediaType)}`}>{item.mediaType}</span>}{item.size && <span className="text-[9px] text-[#86868B]">{item.size}</span>}</div></div>
|
||||
{item.type === "file" && <div className="absolute top-1 right-1 flex gap-1 opacity-0 group-hover:opacity-100"><button onClick={e => { e.stopPropagation(); copyPath(item); }} className="p-1.5 bg-black/70 rounded-lg text-[#86868B] hover:text-white">{copiedPath === item.path ? <Check size={11} className="text-emerald-400" /> : <Copy size={11} />}</button><button onClick={e => { e.stopPropagation(); deleteFile(item.path, item.name); }} className="p-1.5 bg-black/70 rounded-lg text-[#86868B] hover:text-red-400"><Trash2 size={11} /></button></div>}
|
||||
</div>
|
||||
))}</div>}
|
||||
</div>
|
||||
<div className="px-6 py-3 border-t border-white/10 flex items-center justify-between text-[10px] text-[#86868B] shrink-0 bg-black/20"><span>{filtered.length} items • Click to select</span><span className="font-mono">Drag & drop</span></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// MARKDOWN EDITOR — Amber-themed for Parts descriptions
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
function MarkdownEditorAmber({ name, defaultValue = "", required, rows = 8, placeholder, slug }: {
|
||||
name: string; defaultValue?: string; required?: boolean; rows?: number; placeholder?: string; slug?: string;
|
||||
}) {
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const [value, setValue] = useState(defaultValue);
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [showInsertMenu, setShowInsertMenu] = useState(false);
|
||||
const [history, setHistory] = useState<string[]>([defaultValue]);
|
||||
const [historyIndex, setHistoryIndex] = useState(0);
|
||||
const insertMenuRef = useRef<HTMLDivElement>(null);
|
||||
const [isAssetManagerOpen, setIsAssetManagerOpen] = useState(false);
|
||||
|
||||
useEffect(() => { const h = (e: MouseEvent) => { if (insertMenuRef.current && !insertMenuRef.current.contains(e.target as Node)) setShowInsertMenu(false); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, []);
|
||||
|
||||
const historyTimeout = useRef<NodeJS.Timeout | null>(null);
|
||||
const pushHistory = useCallback((v: string) => { if (historyTimeout.current) clearTimeout(historyTimeout.current); historyTimeout.current = setTimeout(() => { setHistory(p => [...p.slice(0, historyIndex + 1), v].slice(-50)); setHistoryIndex(p => Math.min(p + 1, 49)); }, 500); }, [historyIndex]);
|
||||
const handleChange = (v: string) => { setValue(v); pushHistory(v); };
|
||||
const undo = () => { if (historyIndex > 0) { const i = historyIndex-1; setHistoryIndex(i); setValue(history[i]); } };
|
||||
const redo = () => { if (historyIndex < history.length-1) { const i = historyIndex+1; setHistoryIndex(i); setValue(history[i]); } };
|
||||
const getSelection = () => { const ta = textareaRef.current; if (!ta) return { start: 0, end: 0, selected: "", before: "", after: "" }; return { start: ta.selectionStart, end: ta.selectionEnd, selected: value.substring(ta.selectionStart, ta.selectionEnd), before: value.substring(0, ta.selectionStart), after: value.substring(ta.selectionEnd) }; };
|
||||
const replaceSelection = (t: string, o?: number) => { const { before, after } = getSelection(); handleChange(before + t + after); const p = o !== undefined ? before.length + o : before.length + t.length; setTimeout(() => { const ta = textareaRef.current; if (ta) { ta.focus(); ta.setSelectionRange(p, p); } }, 0); };
|
||||
const wrapSelection = (pre: string, suf: string) => { const { selected } = getSelection(); if (selected) replaceSelection(pre+selected+suf); else replaceSelection(pre+"text"+suf, pre.length); };
|
||||
const insertAtCursor = (t: string, o?: number) => replaceSelection(t, o);
|
||||
const prependLine = (pre: string) => { const { start, selected } = getSelection(); const ls = value.lastIndexOf('\n', start-1)+1; const bef = value.substring(0, ls); const line = selected || value.substring(ls).split('\n')[0]; const aft = value.substring(ls+line.length); handleChange(bef+pre+line+aft); setTimeout(() => { const ta = textareaRef.current; if (ta) { ta.focus(); ta.setSelectionRange(ls+pre.length, ls+pre.length+line.length); } }, 0); };
|
||||
|
||||
const handleAssetInsert = (item: { publicUrl: string; mediaType: string; name: string }) => { insertAtCursor("\n!["+item.name+"]("+item.publicUrl+")\n"); };
|
||||
|
||||
const actions = {
|
||||
bold: () => wrapSelection("**","**"), italic: () => wrapSelection("*","*"),
|
||||
h1: () => prependLine("# "), h2: () => prependLine("## "), h3: () => prependLine("### "),
|
||||
quote: () => prependLine("> "),
|
||||
ul: () => insertAtCursor("\n- Item 1\n- Item 2\n", 3),
|
||||
ol: () => insertAtCursor("\n1. First\n2. Second\n", 4),
|
||||
hr: () => insertAtCursor("\n---\n"),
|
||||
table: () => insertAtCursor("\n| Spec | Value |\n|---|---|\n| Material | Steel |\n", 2),
|
||||
image: () => insertAtCursor("\n![Photo](/parts/"+(slug||"sku")+"/photo.jpg)\n", 3),
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => { const m = e.metaKey||e.ctrlKey; if (m && e.key==='b') { e.preventDefault(); actions.bold(); } if (m && e.key==='i') { e.preventDefault(); actions.italic(); } if (m && e.key==='z') { e.preventDefault(); e.shiftKey ? redo() : undo(); } if (e.key === 'Tab') { e.preventDefault(); insertAtCursor(" "); } };
|
||||
|
||||
const ToolBtn = ({ icon: Icon, label, onClick, className="" }: { icon: any; label: string; onClick: () => void; className?: string }) => (<button type="button" onClick={onClick} title={label} className={"p-1.5 rounded-lg text-[#86868B] hover:text-white hover:bg-white/10 transition-all active:scale-90 "+className}><Icon size={15} strokeWidth={2} /></button>);
|
||||
const Divider = () => <div className="w-px h-5 bg-white/10 mx-1" />;
|
||||
|
||||
return (
|
||||
<div className={"flex flex-col "+(isExpanded ? "fixed inset-0 z-[60] bg-[#0A0A0A] p-6" : "")}>
|
||||
<input type="hidden" name={name} value={value} />
|
||||
<div className={"flex flex-wrap items-center gap-0.5 px-2 py-1.5 bg-black/60 border border-white/10 rounded-t-xl "+(isExpanded ? "border-b-0 rounded-t-2xl" : "")}>
|
||||
<ToolBtn icon={Bold} label="Bold" onClick={actions.bold} /><ToolBtn icon={Italic} label="Italic" onClick={actions.italic} /><Divider />
|
||||
<ToolBtn icon={Heading2} label="H2" onClick={actions.h2} /><ToolBtn icon={Heading3} label="H3" onClick={actions.h3} /><Divider />
|
||||
<ToolBtn icon={List} label="Bullet" onClick={actions.ul} /><ToolBtn icon={ListOrdered} label="Numbered" onClick={actions.ol} />
|
||||
<ToolBtn icon={Quote} label="Quote" onClick={actions.quote} /><ToolBtn icon={Table} label="Table" onClick={actions.table} /><Divider />
|
||||
<div className="relative" ref={insertMenuRef}>
|
||||
<button type="button" onClick={() => setShowInsertMenu(!showInsertMenu)} className="flex items-center gap-1 px-2 py-1.5 rounded-lg text-amber-400 hover:bg-amber-500/10 text-[11px] font-semibold uppercase tracking-wider"><Plus size={13} /> Insert <ChevronDown size={11} className={"transition-transform "+(showInsertMenu ? "rotate-180" : "")} /></button>
|
||||
{showInsertMenu && <div className="absolute top-full left-0 mt-1 w-52 bg-[#1A1A1A] border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden"><div className="p-1">
|
||||
<button type="button" onClick={() => { actions.image(); setShowInsertMenu(false); }} className="w-full flex items-center gap-3 px-3 py-2.5 text-white/80 hover:bg-white/5 rounded-lg text-left"><div className="p-1.5 bg-emerald-500/15 rounded-lg text-emerald-400"><ImageIcon size={14} /></div><div><p className="text-xs font-medium">Image</p></div></button>
|
||||
<button type="button" onClick={() => { actions.table(); setShowInsertMenu(false); }} className="w-full flex items-center gap-3 px-3 py-2.5 text-white/80 hover:bg-white/5 rounded-lg text-left"><div className="p-1.5 bg-amber-500/15 rounded-lg text-amber-400"><Table size={14} /></div><div><p className="text-xs font-medium">Spec Table</p></div></button>
|
||||
</div></div>}
|
||||
</div>
|
||||
{slug && (<><Divider /><button type="button" onClick={() => setIsAssetManagerOpen(true)} className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-emerald-400 hover:bg-emerald-500/10 text-[11px] font-semibold uppercase tracking-wider"><FolderOpen size={14} /> Assets</button></>)}
|
||||
<div className="flex-1" />
|
||||
<ToolBtn icon={RotateCcw} label="Undo" onClick={undo} className={historyIndex<=0?"opacity-30 pointer-events-none":""} />
|
||||
<ToolBtn icon={RotateCw} label="Redo" onClick={redo} className={historyIndex>=history.length-1?"opacity-30 pointer-events-none":""} />
|
||||
<Divider />
|
||||
<ToolBtn icon={isExpanded ? Minimize2 : Maximize2} label="Fullscreen" onClick={() => setIsExpanded(!isExpanded)} />
|
||||
</div>
|
||||
<textarea ref={textareaRef} value={value} onChange={e => handleChange(e.target.value)} onKeyDown={handleKeyDown} required={required} rows={isExpanded ? 40 : rows} placeholder={placeholder} className={"w-full bg-black/40 border border-white/10 border-t-0 p-4 text-white font-mono text-sm focus:border-amber-500 outline-none resize-none leading-relaxed "+(isExpanded ? "flex-1 rounded-b-2xl text-base" : "rounded-b-xl")} style={{ tabSize: 2 }} />
|
||||
<div className="flex items-center justify-between mt-1.5 px-1"><div className="flex items-center gap-3 text-[10px] text-[#86868B] font-mono"><span>{value.split('\n').length} lines</span><span className="text-white/10">|</span><span>{value.length} chars</span></div></div>
|
||||
{slug && <AssetManager scope="parts" slug={slug} isOpen={isAssetManagerOpen} onClose={() => setIsAssetManagerOpen(false)} onSelect={handleAssetInsert} accentColor="#f59e0b" />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// MAIN PAGE — Parts Manager (Component Matrix CMS)
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function PartsManager() {
|
||||
const [parts, setParts] = useState<any[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [editingPart, setEditingPart] = useState<any|null>(null);
|
||||
const [media, setMedia] = useState<string[]>([]);
|
||||
const [specs, setSpecs] = useState<{label:string;value:string}[]>([]);
|
||||
const [mediaAssetsOpen, setMediaAssetsOpen] = useState(false);
|
||||
|
||||
// 🔥 ESTADOS PARA EL HERO MODAL
|
||||
const [isHeroModalOpen, setIsHeroModalOpen] = useState(false);
|
||||
const [heroData, setHeroData] = useState<any | null>(null);
|
||||
|
||||
// 🔥 FETCH INICIAL UNIFICADO
|
||||
const fetchInitialData = async () => {
|
||||
setIsLoading(true);
|
||||
const [resParts, resHero] = await Promise.all([getParts(), getPartsCatalogHero()]);
|
||||
if (resParts.success && resParts.parts) setParts(resParts.parts);
|
||||
if (resHero.success && resHero.content) setHeroData(resHero.content);
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => { fetchInitialData(); }, []);
|
||||
|
||||
const openEdit = (part: any) => {
|
||||
setEditingPart(part);
|
||||
try { setMedia(JSON.parse(part.mediaJson || "[]")); } catch { setMedia([]); }
|
||||
try { setSpecs(JSON.parse(part.specsJson || "[]")); } catch { setSpecs([]); }
|
||||
};
|
||||
|
||||
const handleCreate = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault(); setIsSubmitting(true); setError("");
|
||||
const res = await createPart(new FormData(e.currentTarget));
|
||||
if (res.error) setError(res.error);
|
||||
else { setIsCreateOpen(false); fetchInitialData(); }
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
const handleSave = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault(); setIsSubmitting(true); setError("");
|
||||
const formData = new FormData(e.currentTarget);
|
||||
formData.append("mediaJson", JSON.stringify(media.filter(m => m.trim())));
|
||||
formData.append("specsJson", JSON.stringify(specs.filter(s => s.label.trim() || s.value.trim())));
|
||||
const res = await updatePart(formData);
|
||||
if (res.error) setError(res.error);
|
||||
else { setEditingPart(null); fetchInitialData(); }
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
// 🔥 GUARDAR HERO
|
||||
const handleSaveHero = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault(); setIsSubmitting(true); setError("");
|
||||
const res = await updatePartsCatalogHero(new FormData(e.currentTarget));
|
||||
if (res.error) setError(res.error);
|
||||
else { setIsHeroModalOpen(false); fetchInitialData(); }
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
const partSlug = editingPart?.sku?.toLowerCase().replace(/\s+/g, '-') || "new-part";
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-6 md:p-12 max-w-7xl mx-auto">
|
||||
<div className="mb-10">
|
||||
<Link href="/hq-command/dashboard" className="inline-flex items-center gap-2 text-sm text-[#86868B] hover:text-amber-400 transition-colors mb-6 group"><ArrowLeft size={16} className="group-hover:-translate-x-1 transition-transform" /> Back to Command Center</Link>
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
|
||||
<div><h1 className="text-3xl font-light text-white flex items-center gap-3"><Wrench className="text-amber-400" /> Component Matrix</h1><p className="text-[#86868B] mt-2">Manage spare parts, pricing, specs, and product media.</p></div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<button onClick={() => setIsHeroModalOpen(true)} className="flex items-center gap-2 bg-white/5 text-white border border-white/10 px-5 py-2.5 rounded-xl font-medium hover:bg-white/10 transition-all">
|
||||
<Edit3 size={18} /> Edit Page Hero
|
||||
</button>
|
||||
<button onClick={() => setIsCreateOpen(true)} className="flex items-center gap-2 bg-amber-500/10 text-amber-400 border border-amber-500/20 px-5 py-2.5 rounded-xl font-medium hover:bg-amber-500 hover:text-black transition-all">
|
||||
<Plus size={18} /> New Component
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <div className="mb-8 p-4 bg-red-500/10 border border-red-500/20 rounded-xl text-red-400 text-sm">{error}</div>}
|
||||
|
||||
{/* TABLE */}
|
||||
<div className="bg-[#111] border border-white/5 rounded-3xl overflow-hidden shadow-2xl"><div className="overflow-x-auto"><table className="w-full text-left border-collapse"><thead><tr className="border-b border-white/5 text-[10px] uppercase tracking-widest text-[#86868B] bg-black/40"><th className="p-6 font-semibold">Component / SKU</th><th className="p-6 font-semibold">Price</th><th className="p-6 font-semibold">Status</th><th className="p-6 font-semibold text-right">Actions</th></tr></thead>
|
||||
<tbody>
|
||||
{isLoading ? <tr><td colSpan={4} className="p-12 text-center text-[#86868B]"><Loader2 className="animate-spin mx-auto mb-2" size={24} /> Loading matrix...</td></tr>
|
||||
: parts.length === 0 ? <tr><td colSpan={4} className="p-12 text-center text-[#86868B]">No components registered.</td></tr>
|
||||
: parts.map(part => (
|
||||
<tr key={part.id} className={`border-b border-white/5 transition-colors group ${!part.isActive ? 'opacity-50' : 'hover:bg-white/[0.02]'}`}>
|
||||
<td className="p-6"><p className="font-medium text-white">{part.title}</p><p className="text-xs text-amber-400/70 font-mono mt-1">{part.sku}</p></td>
|
||||
<td className="p-6">{part.showPrice && part.price ? <span className="text-white font-mono">€{part.price.toFixed(2)}</span> : <span className="text-[9px] text-[#86868B] uppercase tracking-widest">Quote Based</span>}</td>
|
||||
<td className="p-6"><button onClick={async () => { await togglePartStatus(part.id, part.isActive); fetchInitialData(); }} className={`text-xs font-medium px-3 py-1 rounded-full flex items-center gap-1.5 ${part.isActive ? 'bg-emerald-500/10 text-emerald-400' : 'bg-red-500/10 text-red-400'}`}>{part.isActive ? <><Eye size={12} /> Active</> : <><EyeOff size={12} /> Hidden</>}</button></td>
|
||||
<td className="p-6 text-right"><div className="flex justify-end gap-2"><button onClick={() => openEdit(part)} className="text-[#86868B] hover:text-amber-400 hover:bg-amber-400/10 p-2 rounded-lg opacity-0 group-hover:opacity-100"><Edit3 size={18} /></button><button onClick={async () => { if (confirm("Delete?")) { await deletePart(part.id); fetchInitialData(); } }} className="text-[#86868B] hover:text-red-400 hover:bg-red-400/10 p-2 rounded-lg opacity-0 group-hover:opacity-100"><Trash2 size={18} /></button></div></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody></table></div></div>
|
||||
|
||||
{/* CREATE MODAL */}
|
||||
{isCreateOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
|
||||
<div className="bg-[#111] border border-white/10 w-full max-w-lg rounded-[2rem] p-8 relative shadow-2xl">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-amber-500 to-transparent"></div>
|
||||
<button onClick={() => setIsCreateOpen(false)} className="absolute top-6 right-6 text-[#86868B] hover:text-white"><X size={20} /></button>
|
||||
<h3 className="text-2xl font-light mb-6 text-amber-400 flex items-center gap-2"><Wrench size={24} /> New Component</h3>
|
||||
<form onSubmit={handleCreate} className="space-y-4">
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">SKU (Unique ID)</label><input name="sku" required placeholder="e.g. FLXD-60A-BELT" className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-amber-400 font-mono text-sm focus:border-amber-500 outline-none uppercase" /></div>
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Component Name</label><input name="title" required placeholder="e.g. Drive Belt Assembly" className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-amber-500 outline-none" /></div>
|
||||
<button type="submit" disabled={isSubmitting} className="w-full bg-amber-500 text-black py-3 mt-2 rounded-xl text-sm font-semibold hover:bg-amber-400 flex items-center justify-center gap-2">{isSubmitting ? <Loader2 size={16} className="animate-spin" /> : "Register Component"}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* EDIT MODAL — Component Data Editor */}
|
||||
{editingPart && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
|
||||
<div className="bg-[#111] border border-white/10 w-full max-w-4xl rounded-[2rem] p-0 relative shadow-2xl flex flex-col max-h-[90vh]">
|
||||
<div className="p-6 md:p-8 border-b border-white/10 relative">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-amber-500 to-transparent"></div>
|
||||
<button onClick={() => setEditingPart(null)} className="absolute top-6 right-6 text-[#86868B] hover:text-white"><X size={20} /></button>
|
||||
<h3 className="text-2xl font-light text-amber-400 flex items-center gap-2"><Wrench size={24} /> Component Editor</h3>
|
||||
<p className="text-[#86868B] text-xs font-mono uppercase tracking-widest mt-1">SKU: {editingPart.sku}</p>
|
||||
</div>
|
||||
|
||||
<form id="parts-form" onSubmit={handleSave} className="flex-1 overflow-y-auto p-6 md:p-8 [scrollbar-width:none]">
|
||||
<input type="hidden" name="id" value={editingPart.id} />
|
||||
<div className="space-y-6">
|
||||
{/* Basic Info */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Component Name</label><input name="title" defaultValue={editingPart.title} required className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-lg font-medium focus:border-amber-500 outline-none" /></div>
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">SKU</label><input name="sku" defaultValue={editingPart.sku} required className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-amber-400 font-mono text-sm focus:border-amber-500 outline-none uppercase" /></div>
|
||||
</div>
|
||||
|
||||
{/* Pricing */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5 flex items-center gap-1"><DollarSign size={10} /> Price (EUR)</label><input name="price" type="number" step="0.01" min="0" defaultValue={editingPart.price || ""} placeholder="e.g. 125.00" className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white font-mono text-sm focus:border-amber-500 outline-none" /></div>
|
||||
<div className="flex items-end pb-3"><label className="flex items-center gap-3 text-sm text-white cursor-pointer"><input type="checkbox" name="showPrice" defaultChecked={editingPart.showPrice} className="accent-amber-500 w-5 h-5" /><span>Show price publicly</span></label></div>
|
||||
</div>
|
||||
|
||||
{/* Description with MarkdownEditor */}
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-2 flex justify-between"><span>Description (Markdown)</span><span className="text-amber-400/60 text-[9px] font-normal normal-case">Rich Editor + Assets</span></label>
|
||||
<MarkdownEditorAmber name="description" defaultValue={editingPart.description || ""} required rows={8} placeholder="Technical description, compatibility notes..." slug={partSlug} />
|
||||
</div>
|
||||
|
||||
{/* Product Media */}
|
||||
<div className="bg-black/20 border border-white/5 p-4 rounded-xl">
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-3 flex items-center gap-2"><ImageIcon size={12} /> Product Photos — public/parts/{partSlug}</label>
|
||||
{media.map((img, idx) => (
|
||||
<div key={idx} className="flex gap-2 mb-3">
|
||||
<input value={img} onChange={e => { const n = [...media]; n[idx] = e.target.value; setMedia(n); }} placeholder="e.g. front-view.jpg" className="flex-1 bg-black/60 border border-white/10 rounded-lg px-4 py-2 text-amber-400 font-mono text-sm focus:border-amber-500 outline-none" />
|
||||
<button type="button" onClick={() => setMedia(media.filter((_,i) => i !== idx))} className="text-[#86868B] hover:text-red-400 px-3 bg-black/40 rounded-lg"><Trash2 size={14} /></button>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex gap-2">
|
||||
<button type="button" onClick={() => setMedia([...media, ""])} className="flex-1 border border-dashed border-white/20 text-[#86868B] hover:text-white hover:border-amber-500 py-3 rounded-lg flex justify-center items-center gap-2 text-xs"><Plus size={14} /> Add Photo</button>
|
||||
<button type="button" onClick={() => setMediaAssetsOpen(true)} className="flex items-center gap-1.5 px-4 py-3 text-xs text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 rounded-lg hover:bg-emerald-500/20 font-medium shrink-0"><FolderOpen size={14} /> Browse Assets</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Technical Specs */}
|
||||
<div className="bg-black/20 border border-white/5 p-4 rounded-xl">
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-3 flex items-center gap-2"><Tag size={12} /> Technical Specifications</label>
|
||||
{specs.map((spec, idx) => (
|
||||
<div key={idx} className="flex gap-2 mb-3">
|
||||
<input value={spec.label} onChange={e => { const n = [...specs]; n[idx].label = e.target.value; setSpecs(n); }} placeholder="e.g. Material" className="w-1/3 bg-black/60 border border-white/10 rounded-lg px-3 py-2 text-[#86868B] text-xs uppercase tracking-wider font-semibold outline-none" />
|
||||
<input value={spec.value} onChange={e => { const n = [...specs]; n[idx].value = e.target.value; setSpecs(n); }} placeholder="e.g. Stainless Steel 304" className="flex-1 bg-black/60 border border-white/10 rounded-lg px-3 py-2 text-white text-sm outline-none" />
|
||||
<button type="button" onClick={() => setSpecs(specs.filter((_,i) => i !== idx))} className="text-[#86868B] hover:text-red-400 px-2"><Trash2 size={14} /></button>
|
||||
</div>
|
||||
))}
|
||||
<button type="button" onClick={() => setSpecs([...specs, { label: "", value: "" }])} className="w-full border border-dashed border-white/20 text-[#86868B] hover:text-white hover:border-amber-500 py-3 rounded-lg flex justify-center items-center gap-2 text-xs"><Plus size={14} /> Add Spec</button>
|
||||
</div>
|
||||
|
||||
{/* AI Switch */}
|
||||
<div className="bg-gradient-to-r from-amber-500/10 to-transparent border border-amber-500/20 p-4 rounded-xl flex items-center justify-between">
|
||||
<div className="flex items-center gap-3"><div className="p-2 bg-amber-500/20 rounded-lg text-amber-400"><Sparkles size={18} /></div><div><p className="text-sm text-white font-medium">Flux AI Auto-Translate</p><p className="text-[10px] text-[#86868B] uppercase tracking-widest mt-0.5">IT, VEC, ES, DE</p></div></div>
|
||||
<label className="relative inline-flex items-center cursor-pointer"><input type="checkbox" name="autoTranslate" defaultChecked className="sr-only peer" /><div className="w-11 h-6 bg-black/50 border border-white/10 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-amber-500"></div></label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Asset Manager OUTSIDE the form */}
|
||||
<AssetManager scope="parts" slug={partSlug} isOpen={mediaAssetsOpen} onClose={() => setMediaAssetsOpen(false)} onSelect={(item) => { setMedia(prev => [...prev, item.name]); }} accentColor="#f59e0b" />
|
||||
|
||||
<div className="p-6 border-t border-white/10 bg-[#111] rounded-b-[2rem] flex justify-end gap-3">
|
||||
<button type="button" onClick={() => setEditingPart(null)} className="px-5 py-3 text-sm font-medium text-[#86868B] hover:text-white">Cancel</button>
|
||||
<button onClick={() => (document.getElementById("parts-form") as HTMLFormElement)?.requestSubmit()} disabled={isSubmitting} className="flex items-center gap-2 bg-amber-500 text-black px-8 py-3 rounded-xl text-sm font-semibold hover:bg-amber-400 disabled:opacity-50 shadow-[0_0_15px_rgba(245,158,11,0.3)]">{isSubmitting ? <><Loader2 size={18} className="animate-spin" /> Processing...</> : "Save Component Data"}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 🔥 MODAL PARA EDITAR EL ENCABEZADO DE LA PÁGINA 🔥 */}
|
||||
{isHeroModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
|
||||
<div className="bg-[#111] border border-white/10 w-full max-w-lg rounded-[2rem] p-8 relative shadow-2xl">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-white to-transparent"></div>
|
||||
<button onClick={() => setIsHeroModalOpen(false)} className="absolute top-6 right-6 text-[#86868B] hover:text-white"><X size={20} /></button>
|
||||
<h3 className="text-2xl font-light mb-6 text-white flex items-center gap-2"><Edit3 size={24} /> Catalog Hero Text</h3>
|
||||
<p className="text-xs text-[#86868B] mb-6">Modify the main title and description of the public Spare Parts page.</p>
|
||||
|
||||
<form onSubmit={handleSaveHero} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Title Prefix</label><input name="title" defaultValue={heroData?.title || "Component"} required className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-white outline-none" /></div>
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Title Emphasis</label><input name="subtitle" defaultValue={heroData?.subtitle || "Matrix."} required className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-white outline-none" /></div>
|
||||
</div>
|
||||
<div><label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Description</label><textarea name="description" defaultValue={heroData?.description || ""} rows={3} required className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-white outline-none resize-none" /></div>
|
||||
|
||||
<div className="bg-gradient-to-r from-white/5 to-transparent border border-white/10 p-4 rounded-xl flex items-center justify-between mt-6">
|
||||
<div className="flex items-center gap-3"><div className="p-2 bg-white/10 rounded-lg text-white"><Sparkles size={18} /></div><div><p className="text-sm text-white font-medium">Flux AI Auto-Translate</p><p className="text-[10px] text-[#86868B] uppercase tracking-widest mt-0.5">IT, VEC, ES, DE</p></div></div>
|
||||
<label className="relative inline-flex items-center cursor-pointer"><input type="checkbox" name="autoTranslate" defaultChecked className="sr-only peer" /><div className="w-11 h-6 bg-black/50 border border-white/10 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-white"></div></label>
|
||||
</div>
|
||||
|
||||
<button type="submit" disabled={isSubmitting} className="w-full bg-white text-black py-3 mt-4 rounded-xl text-sm font-bold hover:bg-gray-200 flex items-center justify-center gap-2">{isSubmitting ? <Loader2 size={16} className="animate-spin" /> : "Save Hero Content"}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
"use server";
|
||||
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { revalidatePath } from "next/cache";
|
||||
|
||||
// 🔥 IMPORTAMOS EL TRADUCTOR DE IA
|
||||
import { translateContentForCMS } from "@/lib/aiTranslator";
|
||||
|
||||
// 1. OBTENER HITOS HISTÓRICOS
|
||||
export async function getTimelineEvents() {
|
||||
try {
|
||||
const events = await prisma.timelineEvent.findMany({
|
||||
orderBy: { order: 'asc' }
|
||||
});
|
||||
return { success: true, events };
|
||||
} catch (error) {
|
||||
return { error: "Failed to fetch timeline events." };
|
||||
}
|
||||
}
|
||||
|
||||
// 2. CREAR NUEVO HITO CON IA
|
||||
export async function createTimelineEvent(formData: FormData) {
|
||||
try {
|
||||
const year = formData.get("year") as string;
|
||||
const title = formData.get("title") as string;
|
||||
const description = formData.get("description") as string;
|
||||
const order = parseInt(formData.get("order") as string) || 0;
|
||||
|
||||
// Capturamos el switch de la IA
|
||||
const autoTranslate = formData.get("autoTranslate") === "on";
|
||||
|
||||
if (!year || !title || !description) return { error: "All fields are required." };
|
||||
|
||||
let translationsJson = "{}";
|
||||
|
||||
// 🔥 LA MAGIA DE LA IA 🔥
|
||||
if (autoTranslate) {
|
||||
const aiResult = await translateContentForCMS({ title, description });
|
||||
if (aiResult) translationsJson = JSON.stringify(aiResult);
|
||||
}
|
||||
|
||||
await prisma.timelineEvent.create({
|
||||
data: { year, title, description, order, isActive: true, translationsJson }
|
||||
});
|
||||
|
||||
revalidatePath("/hq-command/dashboard/timeline");
|
||||
revalidatePath("/[locale]", "layout");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: "Failed to create milestone." };
|
||||
}
|
||||
}
|
||||
|
||||
// 3. ACTUALIZAR HITO EXISTENTE CON IA
|
||||
export async function updateTimelineEvent(formData: FormData) {
|
||||
try {
|
||||
const id = formData.get("id") as string;
|
||||
const year = formData.get("year") as string;
|
||||
const title = formData.get("title") as string;
|
||||
const description = formData.get("description") as string;
|
||||
const order = parseInt(formData.get("order") as string) || 0;
|
||||
|
||||
const autoTranslate = formData.get("autoTranslate") === "on";
|
||||
|
||||
if (!id || !year || !title || !description) return { error: "All fields are required." };
|
||||
|
||||
let updateData: any = { year, title, description, order };
|
||||
|
||||
// 🔥 LA MAGIA DE LA IA 🔥
|
||||
if (autoTranslate) {
|
||||
const aiResult = await translateContentForCMS({ title, description });
|
||||
if (aiResult) updateData.translationsJson = JSON.stringify(aiResult);
|
||||
}
|
||||
|
||||
await prisma.timelineEvent.update({
|
||||
where: { id },
|
||||
data: updateData
|
||||
});
|
||||
|
||||
revalidatePath("/hq-command/dashboard/timeline");
|
||||
revalidatePath("/[locale]", "layout");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: "Failed to update milestone." };
|
||||
}
|
||||
}
|
||||
|
||||
// 4. ELIMINAR HITO
|
||||
export async function deleteTimelineEvent(id: string) {
|
||||
try {
|
||||
await prisma.timelineEvent.delete({ where: { id } });
|
||||
revalidatePath("/hq-command/dashboard/timeline");
|
||||
revalidatePath("/[locale]", "layout");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: "Failed to delete milestone." };
|
||||
}
|
||||
}
|
||||
|
||||
// 5. LA SEMILLA
|
||||
export async function seedTimeline() {
|
||||
try {
|
||||
const count = await prisma.timelineEvent.count();
|
||||
if (count > 0) return { error: "Timeline already has data." };
|
||||
|
||||
const milestones = [
|
||||
{ year: "1978", title: "The Foundation", description: "Patrizio Grando establishes the core engineering principles that would define our solid-state RF technology.", order: 1 },
|
||||
{ year: "1995", title: "Industrial Scale", description: "First global deployments of volumetric heating systems for the textile industry, setting new efficiency standards.", order: 2 },
|
||||
{ year: "2010", title: "Sector Expansion", description: "Adapting our proprietary RF technology to food processing, rubber vulcanization, and advanced materials.", order: 3 },
|
||||
{ year: "2026", title: "The Next Era", description: "FLUX introduces the next generation of smart, AI-monitored RF systems with unparalleled energy efficiency.", order: 4 }
|
||||
];
|
||||
|
||||
for (const m of milestones) {
|
||||
await prisma.timelineEvent.create({ data: m });
|
||||
}
|
||||
|
||||
revalidatePath("/hq-command/dashboard/timeline");
|
||||
revalidatePath("/[locale]", "layout");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: "Failed to seed timeline." };
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,209 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { ArrowLeft, History, Plus, Trash2, Loader2, X, DatabaseZap, Clock, Edit3, Sparkles } from "lucide-react";
|
||||
import { getTimelineEvents, createTimelineEvent, updateTimelineEvent, deleteTimelineEvent, seedTimeline } from "./actions";
|
||||
|
||||
export default function TimelineManager() {
|
||||
const [events, setEvents] = useState<any[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isSeeding, setIsSeeding] = useState(false);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [editingEvent, setEditingEvent] = useState<any | null>(null);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const fetchEvents = async () => {
|
||||
setIsLoading(true);
|
||||
const res = await getTimelineEvents();
|
||||
if (res.success && res.events) setEvents(res.events);
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => { fetchEvents(); }, []);
|
||||
|
||||
const handleSeed = async () => {
|
||||
setIsSeeding(true); setError("");
|
||||
const res = await seedTimeline();
|
||||
if (res.error) setError(res.error); else await fetchEvents();
|
||||
setIsSeeding(false);
|
||||
};
|
||||
|
||||
const openCreateModal = () => {
|
||||
setEditingEvent(null);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const openEditModal = (event: any) => {
|
||||
setEditingEvent(event);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleSave = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true); setError("");
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
|
||||
let res;
|
||||
if (editingEvent) {
|
||||
res = await updateTimelineEvent(formData);
|
||||
} else {
|
||||
res = await createTimelineEvent(formData);
|
||||
}
|
||||
|
||||
if (res.error) {
|
||||
setError(res.error);
|
||||
} else {
|
||||
setIsModalOpen(false);
|
||||
fetchEvents();
|
||||
}
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (confirm("Are you sure you want to delete this historical milestone?")) {
|
||||
await deleteTimelineEvent(id);
|
||||
fetchEvents();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-6 md:p-12 max-w-7xl mx-auto">
|
||||
|
||||
{/* HEADER */}
|
||||
<div className="mb-10">
|
||||
<Link href="/hq-command/dashboard" className="inline-flex items-center gap-2 text-sm text-[#86868B] hover:text-amber-400 transition-colors mb-6 group">
|
||||
<ArrowLeft size={16} className="group-hover:-translate-x-1 transition-transform" /> Back to Command Center
|
||||
</Link>
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-light text-white flex items-center gap-3">
|
||||
<History className="text-amber-400" /> Company Legacy
|
||||
</h1>
|
||||
<p className="text-[#86868B] mt-2">Manage historical milestones and the timeline of FLUX.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
{!isLoading && events.length === 0 && (
|
||||
<button onClick={handleSeed} disabled={isSeeding} className="flex items-center gap-2 bg-amber-500/10 text-amber-400 border border-amber-500/20 px-5 py-2.5 rounded-xl font-medium hover:bg-amber-500 hover:text-black transition-all">
|
||||
{isSeeding ? <Loader2 size={18} className="animate-spin" /> : <DatabaseZap size={18} />} Seed History
|
||||
</button>
|
||||
)}
|
||||
<button onClick={openCreateModal} className="flex items-center gap-2 bg-white text-black px-5 py-2.5 rounded-xl font-medium hover:bg-gray-200 transition-all">
|
||||
<Plus size={18} /> Add Milestone
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <div className="mb-8 p-4 bg-red-500/10 border border-red-500/20 rounded-xl text-red-400 text-sm">{error}</div>}
|
||||
|
||||
{/* TIMELINE LIST */}
|
||||
<div className="bg-[#111] border border-white/5 rounded-3xl overflow-hidden shadow-2xl p-6 md:p-10">
|
||||
{isLoading ? (
|
||||
<div className="py-12 text-center text-[#86868B]"><Loader2 className="animate-spin mx-auto mb-2" size={24} /> Loading legacy data...</div>
|
||||
) : events.length === 0 ? (
|
||||
<div className="py-12 text-center"><Clock size={48} className="mx-auto text-amber-400/30 mb-4" /><p className="text-[#86868B]">No milestones recorded yet.</p></div>
|
||||
) : (
|
||||
<div className="space-y-6 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-white/10 before:to-transparent">
|
||||
{events.map((event) => (
|
||||
<div key={event.id} className="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
|
||||
{/* Timeline Dot */}
|
||||
<div className="flex items-center justify-center w-10 h-10 rounded-full border border-white/20 bg-[#111] text-amber-400 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 relative z-10">
|
||||
<div className="w-3 h-3 bg-amber-400 rounded-full"></div>
|
||||
</div>
|
||||
{/* Content Card */}
|
||||
<div className="w-[calc(100%-4rem)] md:w-[calc(50%-3rem)] bg-black/40 border border-white/5 p-6 rounded-2xl hover:border-amber-400/30 transition-colors relative">
|
||||
|
||||
{/* Botones de acción */}
|
||||
<div className="absolute top-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button onClick={() => openEditModal(event)} className="text-[#86868B] hover:text-amber-400 p-1"><Edit3 size={16}/></button>
|
||||
<button onClick={() => handleDelete(event.id)} className="text-[#86868B] hover:text-red-400 p-1"><Trash2 size={16}/></button>
|
||||
</div>
|
||||
|
||||
<span className="text-amber-400 font-mono text-sm tracking-widest bg-amber-400/10 px-3 py-1 rounded-full inline-block mb-3">{event.year}</span>
|
||||
<h4 className="text-xl text-white font-medium mb-2">{event.title}</h4>
|
||||
<p className="text-[#86868B] text-sm leading-relaxed line-clamp-3">{event.description}</p>
|
||||
<p className="text-[10px] text-white/20 mt-4 uppercase tracking-widest">Order: {event.order}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* CREATE / EDIT MODAL */}
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
|
||||
<div className="bg-[#111] border border-white/10 w-full max-w-3xl rounded-[2rem] p-0 relative shadow-2xl flex flex-col max-h-[90vh]">
|
||||
<div className="p-6 md:p-8 border-b border-white/10 relative shrink-0">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-amber-400 to-transparent"></div>
|
||||
<button onClick={() => setIsModalOpen(false)} className="absolute top-6 right-6 text-[#86868B] hover:text-white transition-colors"><X size={20} /></button>
|
||||
<h3 className="text-2xl font-light text-amber-400">
|
||||
{editingEvent ? "Edit Milestone" : "Add New Milestone"}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<form id="timeline-form" onSubmit={handleSave} className="flex-1 overflow-y-auto p-6 md:p-8 [scrollbar-width:none]">
|
||||
{editingEvent && <input type="hidden" name="id" value={editingEvent.id} />}
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Year / Date</label>
|
||||
<input name="year" type="text" defaultValue={editingEvent?.year} required placeholder="e.g., 2026" className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-amber-400 font-mono text-sm focus:border-amber-400 outline-none" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Timeline Position (1, 2, 3)</label>
|
||||
<input name="order" type="number" defaultValue={editingEvent?.order} required placeholder="e.g., 5" className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-amber-400 outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-1.5">Milestone Title</label>
|
||||
<input name="title" type="text" defaultValue={editingEvent?.title} required placeholder="e.g., Next-Gen E-Dryer" className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-amber-400 outline-none" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-2 flex justify-between items-center">
|
||||
<span>Description (Markdown Supported)</span>
|
||||
</label>
|
||||
<textarea name="description" defaultValue={editingEvent?.description} required rows={6} placeholder="Write the history here..." className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-4 text-white font-mono text-sm focus:border-amber-400 outline-none resize-none leading-relaxed mb-3" />
|
||||
|
||||
<div className="bg-amber-400/5 border border-amber-400/20 rounded-xl p-4 text-xs text-[#86868B] font-mono leading-relaxed">
|
||||
<p className="text-amber-400 font-semibold uppercase tracking-widest mb-2 text-[10px]">Markdown Cheat Sheet:</p>
|
||||
<p><strong>**Bold**</strong> | <strong>*Italic*</strong> | <strong>- List Item</strong></p>
|
||||
<p className="mt-1"><strong>> Blockquote</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 🔥 SWITCH DE LA IA 🔥 */}
|
||||
<div className="bg-gradient-to-r from-amber-400/10 to-transparent border border-amber-400/20 p-4 rounded-xl flex items-center justify-between mt-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-amber-400/20 rounded-lg text-amber-400"><Sparkles size={18} /></div>
|
||||
<div>
|
||||
<p className="text-sm text-white font-medium">Flux AI Auto-Translate</p>
|
||||
<p className="text-[10px] text-[#86868B] uppercase tracking-widest mt-0.5">Translates Markdown to IT, VEC, ES, DE</p>
|
||||
</div>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" name="autoTranslate" defaultChecked className="sr-only peer" />
|
||||
<div className="w-11 h-6 bg-black/50 border border-white/10 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-amber-400"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<div className="p-6 border-t border-white/10 bg-[#111] rounded-b-[2rem] flex justify-end gap-3 shrink-0">
|
||||
<button type="button" onClick={() => setIsModalOpen(false)} className="px-5 py-3 text-sm font-medium text-[#86868B] hover:text-white transition-colors">Cancel</button>
|
||||
<button onClick={() => (document.getElementById("timeline-form") as HTMLFormElement)?.requestSubmit()} disabled={isSubmitting} className="flex items-center gap-2 bg-amber-400 text-black px-8 py-3 rounded-xl text-sm font-semibold hover:bg-white transition-colors disabled:opacity-50 shadow-[0_0_15px_rgba(251,191,36,0.3)]">
|
||||
{isSubmitting ? <><Loader2 size={18} className="animate-spin" /> Processing AI...</> : "Publish to Legacy"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
"use server";
|
||||
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import bcrypt from "bcryptjs";
|
||||
import speakeasy from "speakeasy";
|
||||
import QRCode from "qrcode";
|
||||
import { revalidatePath } from "next/cache";
|
||||
|
||||
// 1. OBTENER TODOS LOS USUARIOS
|
||||
export async function getUsers() {
|
||||
try {
|
||||
const users = await prisma.adminUser.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
username: true,
|
||||
email: true, // 🔥 Ahora también pedimos el correo
|
||||
is2FAEnabled: true,
|
||||
createdAt: true,
|
||||
},
|
||||
orderBy: { createdAt: "asc" }
|
||||
});
|
||||
return { success: true, users };
|
||||
} catch (error) {
|
||||
return { error: "Failed to fetch users." };
|
||||
}
|
||||
}
|
||||
|
||||
// 2. CREAR UN NUEVO USUARIO Y GENERAR SU QR
|
||||
export async function createUser(formData: FormData) {
|
||||
const username = formData.get("username") as string;
|
||||
const email = formData.get("email") as string; // 🔥 Nuevo
|
||||
const password = formData.get("password") as string;
|
||||
|
||||
if (!username || username.length < 4) return { error: "Username must be at least 4 characters." };
|
||||
if (!password || password.length < 8) return { error: "Password must be at least 8 characters." };
|
||||
|
||||
try {
|
||||
const existing = await prisma.adminUser.findUnique({ where: { username: username.toLowerCase().trim() } });
|
||||
if (existing) return { error: "Username already exists." };
|
||||
|
||||
const hashedPassword = await bcrypt.hash(password, 12);
|
||||
|
||||
const secret = speakeasy.generateSecret({ name: `FLUX HQ (${username})` });
|
||||
if (!secret.otpauth_url) throw new Error("Failed to generate OTP URL");
|
||||
|
||||
const qrCodeUrl = await QRCode.toDataURL(secret.otpauth_url, {
|
||||
color: { dark: '#000000', light: '#FFFFFF' },
|
||||
margin: 2
|
||||
});
|
||||
|
||||
await prisma.adminUser.create({
|
||||
data: {
|
||||
username: username.toLowerCase().trim(),
|
||||
email: email ? email.toLowerCase().trim() : null, // 🔥 Guardamos el correo
|
||||
passwordHash: hashedPassword,
|
||||
twoFactorSecret: secret.base32,
|
||||
is2FAEnabled: true,
|
||||
}
|
||||
});
|
||||
|
||||
revalidatePath("/hq-command/dashboard/users");
|
||||
|
||||
return { success: true, qrCodeUrl, secret: secret.base32 };
|
||||
} catch (error) {
|
||||
return { error: "An error occurred while creating the user." };
|
||||
}
|
||||
}
|
||||
|
||||
// 3. EDITAR USUARIO (Correo y/o Contraseña) 🔥 NUEVA FUNCIÓN
|
||||
export async function updateUser(formData: FormData) {
|
||||
const id = formData.get("id") as string;
|
||||
const email = formData.get("email") as string;
|
||||
const newPassword = formData.get("newPassword") as string;
|
||||
|
||||
try {
|
||||
// Preparamos el objeto de datos a actualizar
|
||||
const updateData: any = {
|
||||
email: email ? email.toLowerCase().trim() : null,
|
||||
};
|
||||
|
||||
// Si el administrador escribió una nueva contraseña, la encriptamos
|
||||
if (newPassword && newPassword.trim().length > 0) {
|
||||
if (newPassword.length < 8) return { error: "New password must be at least 8 characters." };
|
||||
updateData.passwordHash = await bcrypt.hash(newPassword, 12);
|
||||
}
|
||||
|
||||
await prisma.adminUser.update({
|
||||
where: { id },
|
||||
data: updateData,
|
||||
});
|
||||
|
||||
revalidatePath("/hq-command/dashboard/users");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error("Update User Error:", error);
|
||||
return { error: "Failed to update user." };
|
||||
}
|
||||
}
|
||||
|
||||
// 4. ELIMINAR UN USUARIO
|
||||
export async function deleteUser(id: string) {
|
||||
try {
|
||||
const count = await prisma.adminUser.count();
|
||||
if (count <= 1) return { error: "Security Lock: You cannot delete the last administrator." };
|
||||
|
||||
await prisma.adminUser.delete({ where: { id } });
|
||||
revalidatePath("/hq-command/dashboard/users");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: "Failed to delete user." };
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,305 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { ArrowLeft, Users, Plus, Trash2, ShieldCheck, KeyRound, Loader2, X, Settings } from "lucide-react";
|
||||
import { getUsers, createUser, deleteUser, updateUser } from "./actions";
|
||||
|
||||
export default function UsersManager() {
|
||||
const [users, setUsers] = useState<any[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// Estados para el Modal de Creación
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
// Estados para el Modal de Edición 🔥 NUEVO
|
||||
const [editingUser, setEditingUser] = useState<any | null>(null);
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
// Estados para el QR de éxito
|
||||
const [newQr, setNewQr] = useState<string | null>(null);
|
||||
const [newSecret, setNewSecret] = useState<string | null>(null);
|
||||
|
||||
const fetchUsers = async () => {
|
||||
setIsLoading(true);
|
||||
const res = await getUsers();
|
||||
if (res.success && res.users) {
|
||||
setUsers(res.users);
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
}, []);
|
||||
|
||||
// -- FUNCIÓN DE CREACIÓN --
|
||||
const handleCreateUser = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
setError("");
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const res = await createUser(formData);
|
||||
|
||||
if (res.error) {
|
||||
setError(res.error);
|
||||
} else if (res.success && res.qrCodeUrl) {
|
||||
setNewQr(res.qrCodeUrl);
|
||||
setNewSecret(res.secret || null);
|
||||
fetchUsers();
|
||||
}
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
// -- FUNCIÓN DE EDICIÓN 🔥 NUEVO --
|
||||
const handleEditUser = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
setError("");
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const res = await updateUser(formData);
|
||||
|
||||
if (res.error) {
|
||||
setError(res.error);
|
||||
} else {
|
||||
setEditingUser(null);
|
||||
fetchUsers(); // Refrescamos la tabla para ver el nuevo correo
|
||||
}
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (confirm("Are you sure you want to revoke this architect's access? This cannot be undone.")) {
|
||||
const res = await deleteUser(id);
|
||||
if (res.error) alert(res.error);
|
||||
else fetchUsers();
|
||||
}
|
||||
};
|
||||
|
||||
const closeAndResetModal = () => {
|
||||
setIsModalOpen(false);
|
||||
setNewQr(null);
|
||||
setNewSecret(null);
|
||||
setError("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-6 md:p-12 max-w-7xl mx-auto">
|
||||
|
||||
{/* HEADER Y NAVEGACIÓN */}
|
||||
<div className="mb-10">
|
||||
<Link href="/hq-command/dashboard" className="inline-flex items-center gap-2 text-sm text-[#86868B] hover:text-[#00F0FF] transition-colors mb-6 group">
|
||||
<ArrowLeft size={16} className="group-hover:-translate-x-1 transition-transform" /> Back to Command Center
|
||||
</Link>
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-light text-white flex items-center gap-3">
|
||||
<Users className="text-emerald-400" /> Access Control
|
||||
</h1>
|
||||
<p className="text-[#86868B] mt-2">Manage system architects, emails, and 2FA credentials.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
className="flex items-center gap-2 bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-5 py-2.5 rounded-xl font-medium hover:bg-emerald-500 hover:text-black transition-all"
|
||||
>
|
||||
<Plus size={18} /> Provision New Access
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TABLA DE USUARIOS */}
|
||||
<div className="bg-[#111] border border-white/5 rounded-3xl overflow-hidden shadow-2xl">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-white/5 text-[10px] uppercase tracking-widest text-[#86868B] bg-black/40">
|
||||
<th className="p-6 font-semibold">Architect</th>
|
||||
<th className="p-6 font-semibold">Email</th>
|
||||
<th className="p-6 font-semibold">Security Level</th>
|
||||
<th className="p-6 font-semibold text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{isLoading ? (
|
||||
<tr>
|
||||
<td colSpan={4} className="p-8 text-center text-[#86868B]">
|
||||
<Loader2 className="animate-spin mx-auto mb-2" size={24} /> Loading secure data...
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
users.map((user) => (
|
||||
<tr key={user.id} className="border-b border-white/5 hover:bg-white/[0.02] transition-colors group">
|
||||
<td className="p-6 font-medium text-white flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-xs">
|
||||
{user.username.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
{user.username}
|
||||
</td>
|
||||
<td className="p-6 text-sm text-[#86868B]">
|
||||
{user.email || <span className="italic opacity-50">Not set</span>}
|
||||
</td>
|
||||
<td className="p-6">
|
||||
{user.is2FAEnabled ? (
|
||||
<span className="inline-flex items-center gap-1.5 text-xs font-medium text-emerald-400 bg-emerald-400/10 px-3 py-1 rounded-full">
|
||||
<ShieldCheck size={14} /> 2FA Active
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1.5 text-xs font-medium text-red-400 bg-red-400/10 px-3 py-1 rounded-full">
|
||||
Unsecured
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="p-6 text-right">
|
||||
{/* 🔥 BOTONERA DE ACCIONES 🔥 */}
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<button
|
||||
onClick={() => setEditingUser(user)}
|
||||
className="text-[#86868B] hover:text-emerald-400 hover:bg-emerald-400/10 p-2 rounded-lg transition-colors opacity-0 group-hover:opacity-100"
|
||||
title="Edit User"
|
||||
>
|
||||
<Settings size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(user.id)}
|
||||
className="text-[#86868B] hover:text-red-400 hover:bg-red-400/10 p-2 rounded-lg transition-colors opacity-0 group-hover:opacity-100"
|
||||
title="Revoke Access"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* ────────────────────────────────────────────────────────── */}
|
||||
{/* MODAL DE EDICIÓN DE USUARIO 🔥 NUEVO */}
|
||||
{/* ────────────────────────────────────────────────────────── */}
|
||||
{editingUser && (
|
||||
<div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
|
||||
<div className="bg-[#111] border border-white/10 w-full max-w-md rounded-[2rem] p-8 relative shadow-2xl">
|
||||
<button onClick={() => setEditingUser(null)} className="absolute top-6 right-6 text-[#86868B] hover:text-white transition-colors">
|
||||
<X size={20} />
|
||||
</button>
|
||||
|
||||
<h3 className="text-2xl font-light mb-2 text-emerald-400 flex items-center gap-2">
|
||||
<Settings size={22} /> Edit Profile
|
||||
</h3>
|
||||
<p className="text-[#86868B] text-sm mb-8">Update email or set a new password for <strong className="text-white">{editingUser.username}</strong>.</p>
|
||||
|
||||
<form onSubmit={handleEditUser} className="space-y-5">
|
||||
<input type="hidden" name="id" value={editingUser.id} />
|
||||
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-2 font-semibold">Contact Email</label>
|
||||
<input
|
||||
name="email"
|
||||
type="email"
|
||||
defaultValue={editingUser.email || ""}
|
||||
placeholder="e.g., admin@fluxsrl.com"
|
||||
className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-emerald-400 focus:bg-black transition-all outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-2 font-semibold">New Password (Optional)</label>
|
||||
<input
|
||||
name="newPassword"
|
||||
type="password"
|
||||
placeholder="Leave blank to keep current"
|
||||
className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-emerald-400 focus:bg-black transition-all outline-none"
|
||||
/>
|
||||
<p className="text-[10px] text-[#86868B] mt-2">Note: Changing the password does not invalidate the existing 2FA Google Authenticator code.</p>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-red-400 text-xs text-center bg-red-400/10 py-2 rounded-lg">{error}</p>}
|
||||
|
||||
<button type="submit" disabled={isSubmitting} className="w-full flex items-center justify-center gap-2 bg-emerald-500 text-black py-3 mt-4 rounded-xl text-sm font-semibold hover:bg-emerald-400 transition-colors disabled:opacity-50">
|
||||
{isSubmitting ? <Loader2 size={18} className="animate-spin" /> : "Save Changes"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* ────────────────────────────────────────────────────────── */}
|
||||
{/* MODAL DE CREACIÓN / MOSTRAR QR */}
|
||||
{/* ────────────────────────────────────────────────────────── */}
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
|
||||
<div className="bg-[#111] border border-white/10 w-full max-w-md rounded-[2rem] p-8 relative shadow-2xl">
|
||||
|
||||
{!newQr && (
|
||||
<button onClick={closeAndResetModal} className="absolute top-6 right-6 text-[#86868B] hover:text-white transition-colors">
|
||||
<X size={20} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{newQr ? (
|
||||
// PANTALLA DE ÉXITO (QR CODE)
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-emerald-500/10 text-emerald-400 flex items-center justify-center mb-6">
|
||||
<KeyRound size={32} />
|
||||
</div>
|
||||
<h3 className="text-2xl font-light mb-2">Access Granted</h3>
|
||||
<p className="text-[#86868B] text-sm mb-6">
|
||||
Account created successfully. <strong className="text-white">Have the new architect scan this QR code immediately.</strong> It will never be shown again.
|
||||
</p>
|
||||
<div className="bg-white p-4 rounded-2xl mb-6">
|
||||
<Image src={newQr} alt="2FA QR" width={200} height={200} className="rounded-lg" />
|
||||
</div>
|
||||
<div className="bg-black/50 border border-white/5 p-4 rounded-xl w-full mb-8">
|
||||
<span className="text-[10px] text-[#86868B] uppercase tracking-widest block mb-1">Manual Key</span>
|
||||
<code className="text-emerald-400 text-sm font-mono break-all">{newSecret}</code>
|
||||
</div>
|
||||
<button onClick={closeAndResetModal} className="w-full bg-white text-black py-3 rounded-xl font-semibold hover:bg-gray-200 transition-colors">
|
||||
Acknowledge & Close
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
// PANTALLA DE FORMULARIO
|
||||
<>
|
||||
<h3 className="text-2xl font-light mb-2 text-emerald-400">Provision Access</h3>
|
||||
<p className="text-[#86868B] text-sm mb-8">Create a new architect credential for the FLUX CMS.</p>
|
||||
|
||||
<form onSubmit={handleCreateUser} className="space-y-5">
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-2 font-semibold">Username</label>
|
||||
<input name="username" type="text" required placeholder="e.g., patrizio" className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-emerald-400 focus:bg-black transition-all outline-none" />
|
||||
</div>
|
||||
<div>
|
||||
{/* 🔥 NUEVO CAMPO EN CREACIÓN: Email Opcional */}
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-2 font-semibold">Email (Optional)</label>
|
||||
<input name="email" type="email" placeholder="e.g., patrizio@fluxsrl.com" className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-emerald-400 focus:bg-black transition-all outline-none" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-2 font-semibold">Temporary Password</label>
|
||||
<input name="password" type="password" required placeholder="••••••••••••" className="w-full bg-black/60 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:border-emerald-400 focus:bg-black transition-all outline-none" />
|
||||
</div>
|
||||
|
||||
{error && <p className="text-red-400 text-xs text-center bg-red-400/10 py-2 rounded-lg">{error}</p>}
|
||||
|
||||
<button type="submit" disabled={isSubmitting} className="w-full flex items-center justify-center gap-2 bg-emerald-500 text-black py-3 mt-4 rounded-xl text-sm font-semibold hover:bg-emerald-400 transition-colors disabled:opacity-50">
|
||||
{isSubmitting ? <Loader2 size={18} className="animate-spin" /> : "Generate Credentials"}
|
||||
</button>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import type { Metadata } from "next";
|
||||
import "@/app/globals.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "FLUX Command Center",
|
||||
description: "CMS and Administration",
|
||||
robots: "noindex, nofollow", // Evita que Google indexe el CMS
|
||||
};
|
||||
|
||||
export default function HQLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
// 🔥 El CMS siempre estará en inglés y forzado en modo oscuro
|
||||
<html lang="en" className="dark">
|
||||
{/* Mantenemos tu fondo negro absoluto, texto blanco y el color de selección cyan */}
|
||||
<body className="min-h-screen bg-[#050505] text-[#F5F5F7] antialiased selection:bg-[#00F0FF] selection:text-black">
|
||||
|
||||
{/* Patrón de puntos sutil en el fondo para dar aspecto técnico */}
|
||||
<div
|
||||
className="fixed inset-0 opacity-[0.03] pointer-events-none"
|
||||
style={{ backgroundImage: 'radial-gradient(circle at 2px 2px, white 1px, transparent 0)', backgroundSize: '32px 32px' }}
|
||||
></div>
|
||||
|
||||
<main className="relative z-10">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
"use server";
|
||||
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import bcrypt from "bcryptjs";
|
||||
import speakeasy from "speakeasy";
|
||||
import { createSession, deleteSession } from "@/lib/session";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export async function loginAdmin(formData: FormData) {
|
||||
const username = formData.get("username") as string;
|
||||
const password = formData.get("password") as string;
|
||||
const token2FA = formData.get("token2FA") as string;
|
||||
|
||||
if (!username || !password || !token2FA) {
|
||||
return { error: "All fields are required." };
|
||||
}
|
||||
|
||||
try {
|
||||
// 1. Buscamos al usuario en la base de datos
|
||||
const user = await prisma.adminUser.findUnique({
|
||||
where: { username: username.toLowerCase().trim() }
|
||||
});
|
||||
|
||||
if (!user) {
|
||||
return { error: "Invalid credentials." }; // Mensaje genérico por seguridad
|
||||
}
|
||||
|
||||
// 2. Verificamos la contraseña encriptada
|
||||
const isPasswordValid = await bcrypt.compare(password, user.passwordHash);
|
||||
if (!isPasswordValid) {
|
||||
return { error: "Invalid credentials." };
|
||||
}
|
||||
|
||||
// 3. Verificamos el código de Google Authenticator (El Token de 6 dígitos)
|
||||
if (user.is2FAEnabled && user.twoFactorSecret) {
|
||||
const isTokenValid = speakeasy.totp.verify({
|
||||
secret: user.twoFactorSecret,
|
||||
encoding: "base32",
|
||||
token: token2FA,
|
||||
window: 1 // Permite un margen de 30 segundos
|
||||
});
|
||||
|
||||
if (!isTokenValid) {
|
||||
return { error: "Invalid 2FA code. Please check your Authenticator app." };
|
||||
}
|
||||
} else {
|
||||
return { error: "Security Error: 2FA is not enabled for this account." };
|
||||
}
|
||||
|
||||
// 4. Si pasamos todas las pruebas, creamos la sesión
|
||||
await createSession(user.id, user.username);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Login Error:", error);
|
||||
return { error: "An internal error occurred." };
|
||||
}
|
||||
|
||||
// 5. Redireccionamos al Dashboard
|
||||
redirect("/hq-command/dashboard");
|
||||
}
|
||||
|
||||
// ── DESTRUCTOR DE SESIÓN (NUEVO) ──
|
||||
export async function logoutAdmin() {
|
||||
await deleteSession();
|
||||
redirect("/hq-command/login");
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef } from "react";
|
||||
import { ShieldAlert, User, Lock, KeyRound, ArrowRight, Loader2 } from "lucide-react";
|
||||
import { loginAdmin } from "./actions";
|
||||
|
||||
export default function LoginHQ() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const formRef = useRef<HTMLFormElement>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError("");
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const result = await loginAdmin(formData);
|
||||
|
||||
if (result && result.error) {
|
||||
setError(result.error);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 🔥 MAGIA UX: Si el token llega a 6 dígitos, disparamos el login automáticamente
|
||||
const handleTokenChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
e.target.value = e.target.value.replace(/\D/g, ''); // Solo números
|
||||
|
||||
if (e.target.value.length === 6) {
|
||||
setTimeout(() => {
|
||||
formRef.current?.requestSubmit();
|
||||
}, 150);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#050505] flex flex-col items-center justify-center p-6 relative overflow-hidden">
|
||||
|
||||
{/* Fondo enigmático */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(0,240,255,0.05)_0%,transparent_50%)] pointer-events-none" />
|
||||
|
||||
<div className="w-full max-w-md relative z-10 animate-in fade-in zoom-in-95 duration-700 ease-out">
|
||||
|
||||
<div className="flex flex-col items-center justify-center mb-10">
|
||||
<div className="w-16 h-16 rounded-full border border-[#00F0FF]/20 bg-[#00F0FF]/5 flex items-center justify-center mb-4 shadow-[0_0_30px_rgba(0,240,255,0.15)] backdrop-blur-sm">
|
||||
<ShieldAlert className="text-[#00F0FF]" size={28} />
|
||||
</div>
|
||||
<h1 className="text-3xl font-light text-white tracking-tight">FLUX <span className="font-medium">Command</span></h1>
|
||||
<p className="text-[#00F0FF] text-xs uppercase tracking-widest mt-2 font-semibold">Restricted Area</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#111]/80 backdrop-blur-2xl border border-white/10 p-8 md:p-10 rounded-[2.5rem] shadow-2xl relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[#00F0FF]/80 to-transparent" />
|
||||
|
||||
<form ref={formRef} onSubmit={handleSubmit} className="space-y-5 relative z-10">
|
||||
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-2 font-semibold">Username</label>
|
||||
<div className="relative">
|
||||
<User size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-[#86868B]" />
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
required
|
||||
placeholder="Admin ID"
|
||||
className="w-full bg-black/60 border border-white/10 rounded-xl pl-11 pr-4 py-3.5 text-white text-sm focus:border-[#00F0FF] focus:bg-black transition-all outline-none"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-2 font-semibold">Password</label>
|
||||
<div className="relative">
|
||||
<Lock size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-[#86868B]" />
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
required
|
||||
placeholder="••••••••••••"
|
||||
className="w-full bg-black/60 border border-white/10 rounded-xl pl-11 pr-4 py-3.5 text-white text-sm focus:border-[#00F0FF] focus:bg-black transition-all outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#00F0FF] mb-2 font-semibold flex items-center gap-1.5">
|
||||
<KeyRound size={12} /> 2FA Authentication
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
name="token2FA"
|
||||
required
|
||||
maxLength={6}
|
||||
pattern="\d*"
|
||||
placeholder="000000"
|
||||
autoComplete="one-time-code"
|
||||
onChange={handleTokenChange}
|
||||
disabled={loading}
|
||||
className="w-full bg-black/60 border border-[#00F0FF]/30 rounded-xl px-4 py-3.5 text-[#00F0FF] text-center text-xl tracking-[0.5em] focus:border-[#00F0FF] focus:bg-black focus:shadow-[0_0_20px_rgba(0,240,255,0.1)] transition-all outline-none font-mono placeholder:text-[#00F0FF]/20 disabled:opacity-50"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[10px] text-[#86868B] text-center mt-3">Enter the 6-digit code from your Authenticator app</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-500/10 border border-red-500/20 rounded-xl p-3 text-center animate-in zoom-in-95 duration-300">
|
||||
<p className="text-red-400 text-xs font-medium">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full flex items-center justify-center gap-2 bg-white text-black py-4 mt-4 rounded-xl text-sm font-bold uppercase tracking-widest hover:bg-[#00F0FF] transition-all disabled:opacity-30 disabled:cursor-not-allowed group shadow-lg"
|
||||
>
|
||||
{loading ? (
|
||||
<><Loader2 size={18} className="animate-spin" /> Verifying Protocol...</>
|
||||
) : (
|
||||
<>Authorize Access <ArrowRight size={16} className="group-hover:translate-x-1 transition-transform" /></>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-8 pt-6 border-t border-white/5 text-center">
|
||||
<p className="text-[9px] text-[#86868B] uppercase tracking-widest font-mono">
|
||||
IP Logged • Unauthorized access is strictly prohibited
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
"use server";
|
||||
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import bcrypt from "bcryptjs";
|
||||
import speakeasy from "speakeasy";
|
||||
import QRCode from "qrcode";
|
||||
|
||||
export async function initializeAdmin(username: string, password: string) {
|
||||
try {
|
||||
// 1. VERIFICACIÓN DE SEGURIDAD
|
||||
const adminCount = await prisma.adminUser.count();
|
||||
|
||||
if (adminCount > 0) {
|
||||
return { error: "SECURITY LOCK: System already initialized. Use the internal CMS User Management to add more admins." };
|
||||
}
|
||||
|
||||
// 2. Encriptación
|
||||
const hashedPassword = await bcrypt.hash(password, 12);
|
||||
|
||||
// 3. Generación de la Llave Maestra con Speakeasy
|
||||
const secret = speakeasy.generateSecret({
|
||||
name: `FLUX HQ (${username})` // Así aparecerá en Google Authenticator
|
||||
});
|
||||
|
||||
// Generamos el QR a partir de la URL de Speakeasy
|
||||
if (!secret.otpauth_url) throw new Error("Failed to generate OTP URL");
|
||||
|
||||
const qrCodeUrl = await QRCode.toDataURL(secret.otpauth_url, {
|
||||
color: { dark: '#000000', light: '#FFFFFF' },
|
||||
margin: 2
|
||||
});
|
||||
|
||||
// 4. Guardamos al PRIMER usuario maestro
|
||||
await prisma.adminUser.create({
|
||||
data: {
|
||||
username: username.toLowerCase().trim(),
|
||||
passwordHash: hashedPassword,
|
||||
twoFactorSecret: secret.base32, // Guardamos la llave en Base32
|
||||
is2FAEnabled: true,
|
||||
}
|
||||
});
|
||||
|
||||
return { qrCodeUrl, secret: secret.base32 };
|
||||
|
||||
} catch (error) {
|
||||
console.error("Setup Error:", error);
|
||||
return { error: "An internal server error occurred during setup." };
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ShieldCheck, QrCode, Lock, ArrowRight, Loader2, User } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { initializeAdmin } from "./actions";
|
||||
|
||||
export default function SetupHQ() {
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [qrCode, setQrCode] = useState<string | null>(null);
|
||||
const [secret, setSecret] = useState<string | null>(null);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const handleSetup = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (password.length < 8) {
|
||||
setError("Password must be at least 8 characters.");
|
||||
return;
|
||||
}
|
||||
if (username.length < 4) {
|
||||
setError("Username must be at least 4 characters.");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError("");
|
||||
|
||||
try {
|
||||
const result = await initializeAdmin(username, password);
|
||||
if (result.error) {
|
||||
setError(result.error);
|
||||
} else if (result.qrCodeUrl && result.secret) {
|
||||
setQrCode(result.qrCodeUrl);
|
||||
setSecret(result.secret);
|
||||
}
|
||||
} catch (err) {
|
||||
setError("An unexpected error occurred.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// --- PANTALLA DE ÉXITO (Código QR) ---
|
||||
if (qrCode) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center p-6">
|
||||
<div className="w-full max-w-md bg-[#111] border border-white/10 p-8 rounded-[2rem] shadow-2xl flex flex-col items-center text-center relative overflow-hidden">
|
||||
<div className="absolute top-0 w-full h-1 bg-gradient-to-r from-transparent via-[#00F0FF] to-transparent"></div>
|
||||
|
||||
<div className="w-16 h-16 rounded-full bg-emerald-500/10 text-emerald-400 flex items-center justify-center mb-6">
|
||||
<ShieldCheck size={32} />
|
||||
</div>
|
||||
<h1 className="text-3xl font-light mb-2">Master Key Generated</h1>
|
||||
<p className="text-[#86868B] text-sm mb-8">
|
||||
Scan this QR code with Google Authenticator or Authy. This is the only time it will be shown.
|
||||
</p>
|
||||
|
||||
<div className="bg-white p-4 rounded-2xl mb-6">
|
||||
<Image src={qrCode} alt="2FA QR Code" width={200} height={200} className="rounded-lg" />
|
||||
</div>
|
||||
|
||||
<div className="bg-black/50 border border-white/5 p-4 rounded-xl w-full mb-8">
|
||||
<span className="text-xs text-[#86868B] uppercase tracking-widest block mb-1">Manual Setup Key</span>
|
||||
<code className="text-[#00F0FF] text-lg font-mono break-all">{secret}</code>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => window.location.href = "/hq-command/login"}
|
||||
className="w-full flex items-center justify-center gap-2 bg-white text-black py-3 rounded-xl font-medium hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
Proceed to Login <ArrowRight size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- PANTALLA DEL FORMULARIO INICIAL ---
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col items-center justify-center p-6">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="flex items-center justify-center gap-3 mb-10">
|
||||
<ShieldCheck className="text-[#00F0FF]" size={32} />
|
||||
<h1 className="text-3xl font-light tracking-tight">FLUX <span className="font-medium">Command</span></h1>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#111] border border-white/10 p-8 md:p-10 rounded-[2.5rem] shadow-2xl relative overflow-hidden">
|
||||
{/* Luz superior decorativa */}
|
||||
<div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-white/[0.03] to-transparent pointer-events-none" />
|
||||
|
||||
<h2 className="text-xl font-medium mb-2 relative z-10">Initialize System</h2>
|
||||
<p className="text-[#86868B] text-sm mb-8 relative z-10 leading-relaxed">
|
||||
Create the primary System Architect account. Once initialized, you can create additional accounts inside the dashboard.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSetup} className="space-y-5 relative z-10">
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-2 font-semibold">Master Username</label>
|
||||
<div className="relative">
|
||||
<User size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-[#86868B]" />
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="e.g., david_architect"
|
||||
className="w-full bg-black/60 border border-white/10 rounded-xl pl-11 pr-4 py-3.5 text-white text-sm focus:border-[#00F0FF] focus:bg-black transition-all outline-none"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-widest text-[#86868B] mb-2 font-semibold">Master Password</label>
|
||||
<div className="relative">
|
||||
<Lock size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-[#86868B]" />
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••••••"
|
||||
className="w-full bg-black/60 border border-white/10 rounded-xl pl-11 pr-4 py-3.5 text-white text-sm focus:border-[#00F0FF] focus:bg-black transition-all outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-red-400 text-xs text-center bg-red-400/10 py-2 rounded-lg">{error}</p>}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || password.length < 8 || username.length < 4}
|
||||
className="w-full flex items-center justify-center gap-2 bg-[#00F0FF] text-black py-3.5 mt-4 rounded-xl text-sm font-semibold hover:bg-white transition-all disabled:opacity-30 disabled:cursor-not-allowed group"
|
||||
>
|
||||
{loading ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<QrCode size={18} className="group-hover:scale-110 transition-transform" />
|
||||
Generate Master Key
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user