init

pages/Admin.tsx

@@ -0,0 +1,588 @@
+import React, { useState, useEffect } from 'react';
+import { useAuth } from '../context/AuthContext';
+import { useNavigate } from 'react-router-dom';
+import { 
+  ChevronLeft, RefreshCw, BarChart2, Users, ShoppingCart, Package, 
+  FileText, Globe, Sparkles, MessageSquare, AlertCircle, CheckCircle, 
+  XCircle, Clock, Activity, Save, Mail, Rocket, Edit3, Bell, 
+  AlertTriangle, Archive, Send, Layout, History
+} from 'lucide-react';
+import { Button } from '../components/Button';
+import { supabase, isSupabaseConfigured } from '../lib/supabaseClient';
+import { ProductPackage } from '../types';
+import { defaultPlans } from '../lib/defaultPlans';
+import { generateOrderPrompts, PromptResult } from '../lib/promptGenerator';
+
+interface AdminUser {
+  id: string;
+  email: string;
+  first_name?: string;
+  last_name?: string;
+  created_at: string;
+  role: string;
+}
+
+interface OrderHistoryEntry {
+  id: string;
+  status: string;
+  changed_at: string;
+}
+
+interface EmailLogEntry {
+  id: string;
+  email_type: string;
+  sent_at: string;
+}
+
+interface AdminOrder {
+  id: string;
+  user_id: string;
+  displayId: string;
+  customer: string;
+  email: string;
+  package: string;
+  status: string; 
+  date: string;
+  amount: string;
+  details?: any;
+  history?: OrderHistoryEntry[];
+  emailLogs?: EmailLogEntry[];
+}
+
+export const Admin: React.FC = () => {
+  const { user, isAdmin, loading } = useAuth();
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState<'overview' | 'users' | 'orders' | 'plans'>('overview');
+  const [users, setUsers] = useState<AdminUser[]>([]);
+  const [orders, setOrders] = useState<AdminOrder[]>([]);
+  const [plans, setPlans] = useState<ProductPackage[]>([]);
+  const [loadingData, setLoadingData] = useState(false);
+  const [visitorStats, setVisitorStats] = useState({ month: 0, week: 0 });
+  const [statusUpdating, setStatusUpdating] = useState<string | null>(null);
+  const [planSaving, setPlanSaving] = useState<string | null>(null);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  
+  const [viewOrder, setViewOrder] = useState<AdminOrder | null>(null);
+  const [generatedPrompts, setGeneratedPrompts] = useState<PromptResult[]>([]);
+  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+  const [demoUrlInput, setDemoUrlInput] = useState('');
+  const [savingDemoUrl, setSavingDemoUrl] = useState(false);
+  const [emailSending, setEmailSending] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!loading && !isAdmin) {
+      navigate('/dashboard');
+    }
+  }, [isAdmin, loading, navigate]);
+
+  useEffect(() => {
+    if (isAdmin) fetchAdminData();
+  }, [isAdmin]);
+
+  const fetchAdminData = async () => {
+    setLoadingData(true);
+    setErrorMsg(null);
+    
+    if (!isSupabaseConfigured) {
+        setPlans(defaultPlans);
+        setLoadingData(false);
+        return;
+    }
+
+    try {
+      const { data: profiles, error: pErr } = await supabase.from('profiles').select('*');
+      if (pErr) throw pErr;
+
+      let rolesData: any[] = [];
+      try {
+        const { data: roles } = await supabase.from('roles').select('*');
+        rolesData = roles || [];
+      } catch (e) {
+        console.warn("Could not fetch roles table.");
+      }
+
+      setUsers(profiles.map(p => ({
+        id: p.id,
+        email: p.email || 'N/A',
+        first_name: p.first_name,
+        last_name: p.last_name,
+        created_at: p.created_at,
+        role: rolesData.find(r => r.id === p.id)?.role || (p.email === 'motionstudiohq@gmail.com' ? 'admin' : 'user')
+      })));
+
+      const { data: oData, error: oErr } = await supabase.from('orders').select('*').order('created_at', { ascending: false });
+      if (oErr) throw oErr;
+      setOrders(oData.map(o => ({
+        ...o,
+        displayId: o.id.substring(0, 8).toUpperCase(),
+        customer: o.customer_name,
+        email: o.customer_email
+      })));
+
+      const { data: plData } = await supabase.from('plans').select('*').order('price', { ascending: true });
+      setPlans(plData && plData.length > 0 ? plData : defaultPlans);
+
+      const { count: mCount } = await supabase.from('page_visits').select('*', { count: 'exact', head: true });
+      setVisitorStats({ month: mCount || 0, week: Math.floor((mCount || 0) / 4) });
+
+    } catch (err: any) {
+      setErrorMsg(err.message || "Hiba történt az adatok lekérésekor.");
+    } finally {
+      setLoadingData(false);
+    }
+  };
+
+  const fetchOrderHistory = async (orderId: string) => {
+    if (!isSupabaseConfigured) return [];
+    try {
+      const { data } = await supabase
+        .from('order_status_history')
+        .select('*')
+        .eq('order_id', orderId)
+        .order('changed_at', { ascending: false });
+      return data || [];
+    } catch (e) {
+      return [];
+    }
+  };
+
+  const fetchEmailLogs = async (orderId: string) => {
+    if (!isSupabaseConfigured) return [];
+    try {
+      const { data } = await supabase
+        .from('email_log')
+        .select('*')
+        .eq('order_id', orderId)
+        .order('sent_at', { ascending: false });
+      return data || [];
+    } catch (e) {
+      console.warn("Could not fetch email_log table.");
+      return [];
+    }
+  };
+
+  const handleStatusChange = async (orderId: string, newStatus: string) => {
+    if (statusUpdating) return;
+    setStatusUpdating(orderId);
+    
+    try {
+      if (isSupabaseConfigured) {
+        const { error } = await supabase.from('orders').update({ status: newStatus }).eq('id', orderId);
+        if (error) throw error;
+        
+        await supabase.from('order_status_history').insert({ order_id: orderId, status: newStatus });
+        const newHist = await fetchOrderHistory(orderId);
+        
+        setOrders(prev => prev.map(o => o.id === orderId ? { ...o, status: newStatus } : o));
+        if (viewOrder && viewOrder.id === orderId) {
+          setViewOrder({ ...viewOrder, status: newStatus, history: newHist });
+        }
+      } else {
+        setOrders(prev => prev.map(o => o.id === orderId ? { ...o, status: newStatus } : o));
+        if (viewOrder && viewOrder.id === orderId) {
+          setViewOrder({ ...viewOrder, status: newStatus });
+        }
+      }
+    } catch (e: any) {
+      alert("Hiba: " + e.message);
+    } finally {
+      setStatusUpdating(null);
+    }
+  };
+
+  const handleUpdateDemoUrl = async () => {
+    if (!viewOrder || savingDemoUrl) return;
+    setSavingDemoUrl(true);
+    
+    const orderId = viewOrder.id;
+    const targetStatus = 'pending_feedback';
+    const updatedDetails = { ...(viewOrder.details || {}), demoUrl: demoUrlInput };
+    
+    try {
+      if (isSupabaseConfigured) {
+        const { error } = await supabase.from('orders').update({ 
+          details: updatedDetails, 
+          status: targetStatus 
+        }).eq('id', orderId);
+        
+        if (error) throw error;
+
+        await supabase.from('order_status_history').insert({ order_id: orderId, status: targetStatus });
+        const newHist = await fetchOrderHistory(orderId);
+        
+        setOrders(prev => prev.map(o => o.id === orderId ? { ...o, status: targetStatus, details: updatedDetails } : o));
+        setViewOrder({ ...viewOrder, status: targetStatus, details: updatedDetails, history: newHist });
+        
+        alert(`Sikeres mentés és visszajelzés kérése!`);
+      } else {
+        setViewOrder({ ...viewOrder, details: updatedDetails });
+        alert("Demo URL mentve.");
+      }
+    } catch (e: any) {
+      alert("Hiba: " + e.message);
+    } finally {
+      setSavingDemoUrl(false);
+    }
+  };
+
+  const handleViewDetails = async (order: AdminOrder) => {
+    setLoadingData(true);
+    const history = await fetchOrderHistory(order.id);
+    const emailLogs = await fetchEmailLogs(order.id);
+    setViewOrder({ ...order, history, emailLogs });
+    setDemoUrlInput(order.details?.demoUrl || '');
+    setGeneratedPrompts([]);
+    setLoadingData(false);
+  };
+
+  const handleSendEmail = async (emailType: string) => {
+    if (!viewOrder || emailSending) return;
+    setEmailSending(emailType);
+
+    try {
+      console.log(`Email notification trigger: ${emailType}`);
+      
+      if (isSupabaseConfigured) {
+        const { error } = await supabase.from('email_log').insert({
+          order_id: viewOrder.id,
+          email_type: emailType
+        });
+        
+        if (error) throw error;
+        
+        const newLogs = await fetchEmailLogs(viewOrder.id);
+        setViewOrder({ ...viewOrder, emailLogs: newLogs });
+        
+        alert(`E-mail ("${emailType}") naplózva és kiküldve (szimulált).`);
+      } else {
+        alert(`E-mail értesítő előkészítve: "${emailType}"\n\nJelenleg ez a funkció csak placeholder.`);
+      }
+    } catch (e: any) {
+      alert("Hiba az e-mail naplózásakor: " + e.message);
+    } finally {
+      setEmailSending(null);
+    }
+  };
+
+  const StatusBadge = ({ status }: { status: string }) => {
+    const configs: any = {
+      new: { label: 'Új', color: 'bg-blue-100 text-blue-800' },
+      in_progress: { label: 'Folyamatban', color: 'bg-yellow-100 text-yellow-800' },
+      pending_feedback: { label: 'Visszajelzés', color: 'bg-purple-100 text-purple-800' },
+      completed: { label: 'Kész', color: 'bg-green-100 text-green-800' },
+      cancelled: { label: 'Törölve', color: 'bg-gray-100 text-gray-800' }
+    };
+    const c = configs[status] || configs.new;
+    return <span className={`text-[10px] uppercase font-black px-2 py-0.5 rounded-full ${c.color}`}>{c.label}</span>;
+  };
+
+  if (loading) return <div className="min-h-screen flex items-center justify-center font-bold text-primary">Admin felület...</div>;
+  if (!isAdmin) return null;
+
+  return (
+    <div className="pt-24 bg-gray-50 min-h-screen pb-20 font-sans text-gray-900">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-8 gap-4">
+          <div>
+            <div className="flex items-center gap-2 mb-2">
+               <button onClick={() => navigate('/dashboard')} className="p-2 hover:bg-gray-200 rounded-full transition-colors bg-white shadow-sm border border-gray-100">
+                  <ChevronLeft className="w-5 h-5 text-gray-500" />
+               </button>
+               <span className="text-[10px] font-black text-red-600 bg-red-50 px-3 py-1 rounded-full border border-red-100 uppercase tracking-widest">Admin Access</span>
+            </div>
+            <h1 className="text-4xl font-black tracking-tighter text-gray-900">Vezérlőpult</h1>
+          </div>
+          <Button variant="white" size="sm" onClick={fetchAdminData} disabled={loadingData} className="border-gray-200 shadow-sm font-bold uppercase text-[10px] tracking-widest">
+            <RefreshCw className={`w-4 h-4 mr-2 ${loadingData ? 'animate-spin' : ''}`} /> Adatok frissítése
+          </Button>
+        </div>
+
+        <div className="flex gap-2 mb-10 bg-white p-2 rounded-[24px] border border-gray-100 shadow-sm w-fit">
+          {[
+            { id: 'overview', label: 'Statisztika', icon: BarChart2 },
+            { id: 'users', label: 'Felhasználók', icon: Users },
+            { id: 'orders', label: 'Rendelések', icon: ShoppingCart },
+            { id: 'plans', label: 'Csomagok', icon: Package }
+          ].map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id as any)}
+              className={`flex items-center gap-2 px-6 py-3 rounded-2xl text-sm font-bold transition-all ${
+                activeTab === tab.id ? 'bg-primary text-white shadow-lg' : 'text-gray-500 hover:bg-gray-50'
+              }`}
+            >
+              <tab.icon className="w-4 h-4" />
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        <div className="animate-fade-in">
+          {activeTab === 'overview' && (
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              <div className="bg-white p-10 rounded-[32px] border border-gray-100 shadow-sm">
+                 <p className="text-xs font-bold text-gray-400 uppercase mb-3 tracking-widest">Látogatók</p>
+                 <h3 className="text-5xl font-black text-gray-900">{visitorStats.month}</h3>
+              </div>
+              <div className="bg-white p-10 rounded-[32px] border border-gray-100 shadow-sm">
+                 <p className="text-xs font-bold text-gray-400 uppercase mb-3 tracking-widest">Rendelések</p>
+                 <h3 className="text-5xl font-black text-gray-900">{orders.length}</h3>
+              </div>
+              <div className="bg-white p-10 rounded-[32px] border border-gray-100 shadow-sm">
+                 <p className="text-xs font-bold text-gray-400 uppercase mb-3 tracking-widest">Regisztrációk</p>
+                 <h3 className="text-5xl font-black text-gray-900">{users.length}</h3>
+              </div>
+            </div>
+          )}
+
+          {activeTab === 'users' && (
+            <div className="bg-white rounded-[32px] border border-gray-100 overflow-hidden shadow-sm">
+              <table className="w-full text-left">
+                <thead className="bg-gray-50/50 border-b border-gray-100">
+                  <tr className="text-xs font-bold text-gray-400 uppercase tracking-widest">
+                    <th className="px-10 py-6">Felhasználó Neve</th>
+                    <th className="px-10 py-6">E-mail</th>
+                    <th className="px-10 py-6">Szint</th>
+                    <th className="px-10 py-6 text-right">Regisztráció</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-50 font-medium">
+                  {users.map(u => (
+                    <tr key={u.id} className="hover:bg-gray-50/50 transition-colors">
+                      <td className="px-10 py-6">
+                         <span className="font-black text-gray-900">{u.last_name || ''} {u.first_name || ''}</span>
+                         {(!u.last_name && !u.first_name) && <span className="text-gray-400 italic">Nincs megadva</span>}
+                      </td>
+                      <td className="px-10 py-6">
+                         <span className="text-sm font-bold text-gray-900">{u.email}</span>
+                      </td>
+                      <td className="px-10 py-6">
+                        <span className={`px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest ${u.role === 'admin' ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-600'}`}>{u.role}</span>
+                      </td>
+                      <td className="px-10 py-6 text-right text-sm text-gray-500">{new Date(u.created_at).toLocaleDateString('hu-HU')}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {activeTab === 'orders' && (
+            <div className="bg-white rounded-[32px] border border-gray-100 overflow-hidden shadow-sm">
+              <table className="w-full text-left">
+                <thead className="bg-gray-50/50 border-b border-gray-100 text-xs font-bold text-gray-400 uppercase tracking-widest">
+                  <tr>
+                    <th className="px-10 py-6">Ügyfél</th>
+                    <th className="px-10 py-6">Csomag</th>
+                    <th className="px-10 py-6">Státusz</th>
+                    <th className="px-10 py-6 text-right">Művelet</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-50">
+                  {orders.map(o => (
+                    <tr key={o.id} className="hover:bg-gray-50/30 transition-colors">
+                      <td className="px-10 py-6">
+                        <p className="font-black leading-tight text-gray-900">{o.customer}</p>
+                        <p className="text-[11px] text-gray-500 font-bold">{o.email}</p>
+                      </td>
+                      <td className="px-10 py-6 text-sm font-bold text-primary">{o.package}</td>
+                      <td className="px-10 py-6"><StatusBadge status={o.status} /></td>
+                      <td className="px-10 py-6 text-right">
+                        <Button size="sm" variant="outline" onClick={() => handleViewDetails(o)} className="rounded-2xl border-gray-200 px-6 font-black uppercase text-[10px] tracking-widest">Kezelés</Button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {activeTab === 'plans' && (
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
+              {plans.map((p, i) => (
+                <div key={p.id} className="bg-white p-10 rounded-[32px] border border-gray-100 shadow-sm flex flex-col">
+                  <input type="text" value={p.name} onChange={e => { const n = [...plans]; n[i].name = e.target.value; setPlans(n); }} className="text-xl font-black border-b border-gray-200 focus:border-primary outline-none w-full pb-1 text-black bg-white mb-6" />
+                  <textarea rows={8} value={p.features.join('\n')} onChange={e => { const n = [...plans]; n[i].features = e.target.value.split('\n'); setPlans(n); }} className="text-sm p-4 bg-white rounded-2xl border border-gray-200 w-full resize-none outline-none focus:ring-4 focus:ring-primary/5 focus:border-primary font-medium text-black mb-8" />
+                  <Button fullWidth onClick={() => { setPlanSaving(p.id); supabase.from('plans').upsert(p).then(() => { setPlanSaving(null); alert("Mentve!"); }); }} disabled={planSaving === p.id}>
+                    {planSaving === p.id ? <RefreshCw className="w-5 h-5 animate-spin" /> : <span className="flex items-center gap-2"><Save className="w-5 h-5" /> Mentés</span>}
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {viewOrder && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/80 backdrop-blur-sm overflow-y-auto">
+            <div className="bg-white rounded-[40px] shadow-2xl w-full max-w-6xl max-h-[95vh] overflow-hidden flex flex-col animate-fade-in-up border border-white/10">
+              <div className="px-10 py-8 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
+                <div className="flex items-center gap-6">
+                   <div className="w-14 h-14 bg-white rounded-3xl shadow-md flex items-center justify-center text-primary border border-gray-100">
+                      <ShoppingCart className="w-7 h-7" />
+                   </div>
+                   <div>
+                      <h2 className="text-3xl font-black tracking-tighter text-gray-900">{viewOrder.customer}</h2>
+                      <p className="text-sm text-gray-400 font-bold uppercase tracking-widest">{viewOrder.email} • ID: {viewOrder.displayId}</p>
+                   </div>
+                </div>
+                <button onClick={() => setViewOrder(null)} className="p-3 hover:bg-gray-200 rounded-full transition-all bg-white border border-gray-100">
+                  <XCircle className="w-7 h-7 text-gray-400" />
+                </button>
+              </div>
+
+              <div className="flex-grow overflow-y-auto p-10 lg:p-14 space-y-16 bg-gray-50/30">
+                <div className="grid md:grid-cols-12 gap-16">
+                  <div className="md:col-span-8 space-y-12">
+                    <section>
+                       <h3 className="text-[11px] font-black text-gray-400 uppercase tracking-[0.3em] mb-6 flex items-center gap-2"><FileText className="w-4 h-4" /> Projekt részletei</h3>
+                       <div className="bg-white p-8 rounded-[32px] border border-gray-100 shadow-sm text-black space-y-6">
+                          <div className="grid grid-cols-2 gap-4">
+                             <div><p className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Csomag</p><p className="font-bold text-primary">{viewOrder.package}</p></div>
+                             <div><p className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Összeg</p><p className="font-bold text-gray-900">{viewOrder.amount}</p></div>
+                          </div>
+                          <div><p className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Domain</p><p className="font-bold bg-gray-50 px-3 py-1.5 rounded-lg border border-gray-100 inline-block text-gray-900">{viewOrder.details?.domainName || 'Nincs'}</p></div>
+                          <div className="pt-6 border-t border-gray-200"><p className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2">Leírás:</p><p className="italic leading-relaxed font-medium text-gray-800">"{viewOrder.details?.description || 'Nincs'}"</p></div>
+                       </div>
+                    </section>
+
+                    <section>
+                      <h3 className="text-[11px] font-black text-gray-400 uppercase tracking-[0.3em] mb-6">Státusz módosítása</h3>
+                      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
+                         {[
+                           { id: 'new', label: 'Új' },
+                           { id: 'in_progress', label: 'Folyamatban' },
+                           { id: 'pending_feedback', label: 'Visszajelzés' },
+                           { id: 'completed', label: 'Kész' },
+                           { id: 'cancelled', label: 'Törölve' }
+                         ].map(s => (
+                           <button 
+                             key={s.id} 
+                             onClick={() => handleStatusChange(viewOrder.id, s.id)} 
+                             disabled={statusUpdating === viewOrder.id}
+                             className={`px-4 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all border-2 flex items-center justify-between gap-2 ${viewOrder.status === s.id ? 'bg-gray-900 text-white border-gray-900 shadow-xl' : 'bg-white text-gray-500 border-gray-100 hover:border-primary/40'}`}
+                           >
+                             <span>{s.label}</span>
+                             {viewOrder.status === s.id && <CheckCircle className="w-3 h-3 text-green-400" />}
+                           </button>
+                         ))}
+                      </div>
+                    </section>
+
+                    {/* EMAIL NOTIFICATIONS & LOGS COMBINED */}
+                    <section className="space-y-8">
+                       <div>
+                          <h3 className="text-[11px] font-black text-gray-400 uppercase tracking-[0.3em] mb-6 flex items-center gap-2"><Mail className="w-4 h-4" /> E-mail értesítők</h3>
+                          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                              {[
+                                { label: 'Fejlesztés megkezdése', icon: Rocket },
+                                { label: 'Demó oldal elkészült', icon: Layout },
+                                { label: 'Módosítások fejlesztése', icon: Edit3 },
+                                { label: '1 hete nincs visszajelzés', icon: Bell },
+                                { label: '2 hete nincs visszajelzés', icon: AlertTriangle },
+                                { label: 'Projekt lezárva (Nincs válasz)', icon: Archive },
+                                { label: 'Végleges oldal elérhető', icon: CheckCircle }
+                              ].map((email, idx) => (
+                                <button
+                                  key={idx}
+                                  onClick={() => handleSendEmail(email.label)}
+                                  disabled={!!emailSending}
+                                  className="flex items-center gap-4 p-4 bg-white border border-gray-100 rounded-[20px] hover:border-primary hover:shadow-md transition-all text-left group disabled:opacity-50"
+                                >
+                                  <div className="w-10 h-10 bg-gray-50 rounded-xl flex items-center justify-center text-gray-400 group-hover:bg-primary/10 group-hover:text-primary transition-colors">
+                                    {emailSending === email.label ? <RefreshCw className="w-5 h-5 animate-spin" /> : <email.icon className="w-5 h-5" />}
+                                  </div>
+                                  <div className="flex-grow">
+                                    <p className="text-xs font-bold text-gray-900">{email.label}</p>
+                                    <p className="text-[9px] text-gray-400 uppercase font-black tracking-widest mt-0.5">Értesítő küldése</p>
+                                  </div>
+                                  <Send className="w-3 h-3 text-gray-300 group-hover:text-primary group-hover:translate-x-1 transition-all" />
+                                </button>
+                              ))}
+                          </div>
+                       </div>
+
+                       {/* IN-PLACE EMAIL LOG */}
+                       <div className="bg-purple-50/50 p-8 rounded-[32px] border border-purple-100 shadow-sm">
+                          <h4 className="text-[11px] font-black text-purple-600 uppercase tracking-[0.3em] mb-6 flex items-center gap-2"><History className="w-4 h-4" /> Korábban kiküldött e-mailek</h4>
+                          <div className="space-y-6 relative before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-0.5 before:bg-purple-200">
+                              {viewOrder.emailLogs && viewOrder.emailLogs.length > 0 ? (
+                                viewOrder.emailLogs.map((log) => (
+                                  <div key={log.id} className="relative pl-8">
+                                    <div className={`absolute left-0 top-1.5 w-6 h-6 rounded-full border-4 border-white shadow-sm z-10 bg-purple-500`} />
+                                    <div className="text-black">
+                                        <p className="text-xs font-bold text-gray-900">{log.email_type}</p>
+                                        <p className="text-[10px] font-black text-purple-400 uppercase tracking-widest mt-0.5">{new Date(log.sent_at).toLocaleString('hu-HU')}</p>
+                                    </div>
+                                  </div>
+                                ))
+                              ) : (
+                                <p className="text-xs text-gray-400 italic pl-8">Még nem küldtünk e-mailt ehhez a rendeléshez.</p>
+                              )}
+                          </div>
+                       </div>
+                    </section>
+
+                    <section className="pt-8 border-t border-gray-100">
+                       <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-10 gap-4">
+                          <h3 className="text-2xl font-black text-gray-900 flex items-center gap-3 uppercase tracking-tighter"><Sparkles className="w-7 h-7 text-purple-600" /> AI Fejlesztői Promptok</h3>
+                          <Button size="sm" onClick={() => setGeneratedPrompts(generateOrderPrompts(viewOrder))}>Promptok Generálása</Button>
+                       </div>
+                       <div className="grid gap-6">
+                          {generatedPrompts.map((p, i) => (
+                            <div key={i} className="border border-gray-100 rounded-[32px] overflow-hidden bg-white shadow-sm">
+                               <div className="bg-gray-50/50 px-8 py-4 flex justify-between items-center border-b border-gray-100">
+                                  <span className="text-[11px] font-black text-gray-600 uppercase tracking-widest">{p.title}</span>
+                                  <button onClick={() => { navigator.clipboard.writeText(p.content); setCopiedIndex(i); setTimeout(() => setCopiedIndex(null), 2000); }} className={`text-[10px] font-black px-4 py-1.5 rounded-full uppercase tracking-widest ${copiedIndex === i ? 'bg-green-500 text-white' : 'bg-primary/10 text-primary'}`}>{copiedIndex === i ? 'MÁSOLVA!' : 'MÁSOLÁS'}</button>
+                               </div>
+                               <div className="p-8 bg-gray-900 overflow-x-auto"><pre className="text-gray-300 text-[11px] font-mono leading-relaxed"><code>{p.content}</code></pre></div>
+                            </div>
+                          ))}
+                       </div>
+                    </section>
+                  </div>
+
+                  <div className="md:col-span-4 space-y-10 border-l border-gray-100 pl-10">
+                    <section className="bg-blue-50/50 p-8 rounded-[40px] border border-blue-100 shadow-sm">
+                       <h3 className="text-blue-900 font-black mb-6 flex items-center gap-3 text-lg uppercase tracking-tighter"><Globe className="w-5 h-5" /> Demo URL közzététele</h3>
+                       <div className="flex flex-col gap-3">
+                          <input 
+                            type="text" 
+                            value={demoUrlInput} 
+                            onChange={e => setDemoUrlInput(e.target.value)} 
+                            placeholder="https://..." 
+                            className="w-full px-5 py-4 rounded-2xl border border-gray-200 bg-white text-black text-sm font-bold outline-none focus:border-blue-500 transition-all shadow-sm" 
+                          />
+                          <button 
+                            onClick={handleUpdateDemoUrl} 
+                            disabled={savingDemoUrl} 
+                            className="bg-blue-600 hover:bg-blue-700 text-white font-black px-6 py-4 rounded-2xl text-xs uppercase tracking-widest transition-all disabled:opacity-50 shadow-lg shadow-blue-200"
+                          >
+                            {savingDemoUrl ? 'MENTÉS...' : 'PUBLIKÁLÁS ÉS VISSZAJELZÉS KÉRÉSE'}
+                          </button>
+                       </div>
+                    </section>
+
+                    <section>
+                       <h3 className="text-gray-900 font-black mb-6 flex items-center gap-3 text-lg uppercase tracking-tighter"><Clock className="w-5 h-5 text-primary" /> Státusz Történet</h3>
+                       <div className="space-y-6 relative before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-0.5 before:bg-gray-100">
+                          {viewOrder.history?.map((h, i) => (
+                            <div key={h.id} className="relative pl-8">
+                               <div className={`absolute left-0 top-1.5 w-6 h-6 rounded-full border-4 border-white shadow-sm z-10 ${i === 0 ? 'bg-primary' : 'bg-gray-300'}`} />
+                               <div className="text-black">
+                                  <StatusBadge status={h.status} />
+                                  <p className="text-[11px] font-bold text-gray-500 mt-1 uppercase">{new Date(h.changed_at).toLocaleString('hu-HU')}</p>
+                               </div>
+                            </div>
+                          ))}
+                       </div>
+                    </section>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};