import React, { useState, useEffect, useMemo } from 'react'; import { initializeApp } from 'firebase/app'; import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged, signOut } from 'firebase/auth'; import { getFirestore, collection, doc, addDoc, onSnapshot, updateDoc, deleteDoc, serverTimestamp } from 'firebase/firestore'; import { LayoutDashboard, Briefcase, Users, CheckSquare, LogOut, Plus, Trash2, Mail, Zap, MessageSquare, BarChart3, Globe, Eye, Download, Video, Camera, MonitorPlay, Sparkles, FileText, X, TrendingUp, Instagram, Facebook, Linkedin, Twitter, Award, Crown, Calendar, ChevronRight, Phone, Layers, Info, Send, CheckCircle2, Circle } from 'lucide-react'; // --- Configuration Firebase --- const firebaseConfig = JSON.parse(__firebase_config); const app = initializeApp(firebaseConfig); const auth = getAuth(app); const db = getFirestore(app); const appId = typeof __app_id !== 'undefined' ? __app_id : 'z-media-prod-v3'; // --- Dictionary / Translations --- const translations = { ar: { dashboard: "لوحة التحكم", projects: "المشاريع", clients: "العملاء", messages: "الرسائل", todo: "المهام", revenue: "المداخيل", totalProjects: "إجمالي المشاريع", activeClients: "عملاء نشطون", newMessages: "رسائل جديدة", addProject: "إضافة مشروع", assignedTo: "المكلف به", budget: "الميزانية", save: "حفظ", login: "دخول آمن", logout: "خروج", portfolio: "أعمالنا", contactUs: "اتصل بنا", send: "إرسال", welcome: "مرحباً بك في Z Media", about: "من نحن", services: "خدماتنا", ourWork: "معرض الأعمال", invoices: "الفواتير", addInvoice: "إضافة فاتورة", amount: "المبلغ", clientName: "اسم الزبون", date: "التاريخ", deleteTask: "حذف المهمة", addTask: "إضافة مهمة", edit: "تعديل", delete: "حذف", topProjects: "أفضل المشاريع", statistics: "الإحصائيات (درهم/يوم)", download: "تحميل الفاتورة", duration: "المدة (أيام)", phone: "الهاتف", type: "النوع", addService: "إضافة خدمة", serviceName: "اسم الخدمة", langName: "العربية" }, en: { dashboard: "Dashboard", projects: "Projects", clients: "Clients", messages: "Messages", todo: "To-Do", revenue: "Revenue", totalProjects: "Total Projects", activeClients: "Active Clients", newMessages: "New Messages", addProject: "Add Project", assignedTo: "Assigned To", budget: "Budget", save: "Save", login: "Secure Login", logout: "Logout", portfolio: "Portfolio", contactUs: "Contact Us", send: "Send", welcome: "Welcome to Z Media", about: "About Us", services: "Services", ourWork: "Portfolio", invoices: "Invoices", addInvoice: "Add Invoice", amount: "Amount", clientName: "Client Name", date: "Date", deleteTask: "Delete Task", addTask: "Add Task", edit: "Edit", delete: "Delete", topProjects: "Top Projects", statistics: "Daily Rate Stats", download: "Download Invoice", duration: "Duration (Days)", phone: "Phone", type: "Type", addService: "Add Service", serviceName: "Service Name", langName: "English" }, fr: { dashboard: "Tableau de Bord", projects: "Projets", clients: "Clients", messages: "Messages", todo: "Missions", revenue: "Revenus", totalProjects: "Total Projets", activeClients: "Clients Actifs", newMessages: "Nouveaux Messages", addProject: "Ajouter Projet", assignedTo: "Assigné à", budget: "Budget", save: "Enregistrer", login: "Connexion", logout: "Déconnexion", portfolio: "Portfolio", contactUs: "Contactez-nous", send: "Envoyer", welcome: "Bienvenue chez Z Media", about: "À Propos", services: "Nos Services", ourWork: "Portfolio", invoices: "Factures", addInvoice: "Nouvelle Facture", amount: "Montant", clientName: "Client", date: "Date", deleteTask: "Supprimer Mission", addTask: "Ajouter Mission", edit: "Modifier", delete: "Supprimer", topProjects: "Top Projets", statistics: "Stats Journalières", download: "Télécharger Facture", duration: "Durée (Jours)", phone: "Téléphone", type: "Type", addService: "Ajouter Service", serviceName: "Nom du Service", langName: "Français" } }; export default function App() { const [user, setUser] = useState(null); const [view, setView] = useState('home'); const [lang, setLang] = useState('ar'); const t = translations[lang]; // Global States const [projects, setProjects] = useState([]); const [clients, setClients] = useState([]); const [messages, setMessages] = useState([]); const [todos, setTodos] = useState([]); const [invoices, setInvoices] = useState([]); const [services, setServices] = useState([]); // --- Auth logic --- useEffect(() => { const initAuth = async () => { if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) { await signInWithCustomToken(auth, __initial_auth_token); } else { await signInAnonymously(auth); } }; initAuth(); const unsub = onAuthStateChanged(auth, setUser); return () => unsub(); }, []); // --- Firestore Syncing --- useEffect(() => { if (!user) return; const coll = (name) => collection(db, 'artifacts', appId, 'public', 'data', name); const unsub = [ onSnapshot(coll('projects'), s => setProjects(s.docs.map(d => ({ id: d.id, ...d.data() })))), onSnapshot(coll('clients'), s => setClients(s.docs.map(d => ({ id: d.id, ...d.data() })))), onSnapshot(coll('messages'), s => setMessages(s.docs.map(d => ({ id: d.id, ...d.data() })))), onSnapshot(coll('todos'), s => setTodos(s.docs.map(d => ({ id: d.id, ...d.data() })))), onSnapshot(coll('invoices'), s => setInvoices(s.docs.map(d => ({ id: d.id, ...d.data() })))), onSnapshot(coll('services'), s => setServices(s.docs.map(d => ({ id: d.id, ...d.data() })))) ]; return () => unsub.forEach(fn => fn()); }, [user]); const dbAdd = async (c, data) => { if (!user) return; await addDoc(collection(db, 'artifacts', appId, 'public', 'data', c), { ...data, createdAt: serverTimestamp() }); }; const dbDelete = async (c, id) => { if (!user) return; await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', c, id)); }; const dbUpdate = async (c, id, data) => { if (!user) return; await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', c, id), data); }; if (view === 'home') return dbAdd('messages', m)} lang={lang} setLang={setLang} t={t} />; if (view === 'login' && (!user || user.isAnonymous)) return ; const cycleLang = () => { const langs = ['ar', 'en', 'fr']; const idx = langs.indexOf(lang); setLang(langs[(idx + 1) % langs.length]); }; return (
{view === 'dashboard' && } {view === 'projects' && dbAdd('projects', d)} onDelete={(id) => dbDelete('projects', id)} t={t} />} {view === 'clients' && dbAdd('clients', d)} onDelete={(id) => dbDelete('clients', id)} t={t} />} {view === 'services' && dbAdd('services', d)} onDelete={(id) => dbDelete('services', id)} t={t} />} {view === 'invoices' && dbAdd('invoices', d)} onDelete={(id) => dbDelete('invoices', id)} t={t} />} {view === 'todo' && dbAdd('todos', d)} onDelete={(id) => dbDelete('todos', id)} onUpdate={(id, data) => dbUpdate('todos', id, data)} t={t} />} {view === 'messages' && dbDelete('messages', id)} t={t} />}
); } // --- LANDING PAGE --- function LandingPage({ setView, projects, services, onSendMessage, lang, setLang, t }) { const [form, setForm] = useState({ name: '', email: '', message: '' }); const [status, setStatus] = useState(''); const sendMsg = (e) => { e.preventDefault(); if(!form.name || !form.message) return; onSendMessage(form); setStatus('Success!'); setForm({ name: '', email: '', message: '' }); }; const cycleLang = () => { const langs = ['ar', 'en', 'fr']; const idx = langs.indexOf(lang); setLang(langs[(idx + 1) % langs.length]); }; return (
{/* Hero */}

{lang === 'ar' ? 'صناعة' : lang === 'fr' ? 'CRÉER' : 'MAKING'}
STORIES {lang === 'ar' ? 'بذكاء' : lang === 'fr' ? 'RÉEL' : 'REAL'}

{lang === 'ar' ? 'وكالة إنتاج إبداعية تدمج الفن بالتكنولوجيا لخلق محتوى بصري لا ينسى.' : lang === 'fr' ? 'Une agence de production créative qui fusionne l\'art et la technologie.' : 'A boutique creative studio specialized in high-end visual storytelling.'}

{/* About */}

{t.about}

{lang === 'ar' ? 'نحن نؤمن بأن كل علامة تجارية لها قصة فريدة تستحق أن تروى بأفضل جودة بصرية ممكنة.' : lang === 'fr' ? 'Nous croyons que chaque marque a une histoire unique qui mérite d\'être racontée.' : 'We believe every brand has a story worth telling with the highest visual quality.'}

{/* Services Section - Updated with Dynamic System Cards */}

{t.services}

{services.map((s, idx) => (
{idx % 3 === 0 ? : idx % 3 === 1 ? :

{s.name}

{lang === 'ar' ? 'نظام متكامل لتقديم خدمات ' : lang === 'fr' ? 'Système complet pour ' : 'Professional system for '} {s.name}

))} {services.length === 0 &&

NO SYSTEMS LOADED YET.

}
{/* Contact */}

{t.contactUs}

setForm({...form, name:e.target.value})} /> setForm({...form, email:e.target.value})} />
{/* Footer */}
Z MEDIA.

© 2024 Z MEDIA CREATIVE OS

); } // --- DASHBOARD CONTENT --- function DashboardContent({ projects, clients, messages, t }) { const totalRevenue = useMemo(() => projects.reduce((a,b) => a + (Number(b.budget) || 0), 0), [projects]); const dailyRateData = useMemo(() => { return projects.map(p => { const b = Number(p.budget) || 0; const d = Number(p.duration) || 1; return { name: p.title, rate: Math.round(b / d) }; }).sort((a,b) => b.rate - a.rate).slice(0, 6); }, [projects]); return (

{t.statistics}

{dailyRateData.map((d, i) => { const max = dailyRateData[0]?.rate || 1; const h = (d.rate / max) * 100; return (
{d.rate}
{d.name}
); })}

{t.topProjects}

{projects.sort((a,b)=>b.budget-a.budget).slice(0,4).map((p,i)=>(
#{i+1} {p.title}
{p.budget} MAD
))}
); } // --- PROJECT MANAGER --- function ProjectManager({ projects, clients, services, onAdd, onDelete, t }) { const [f, setF] = useState({ title: '', client: '', budget: '', duration: '1', service: '' }); const [show, setShow] = useState(false); return (

{t.projects}

{show && (
setF({...f, title: e.target.value})} /> setF({...f, budget: e.target.value})} /> setF({...f, duration: e.target.value})} />
)}
{projects.map(p => (
{p.service || 'Production'} {p.duration}d

{p.title}

{p.client}

Budget

{p.budget} MAD

))}
); } // --- CLIENT CRM --- function ClientCRM({ clients, onAdd, onDelete, t }) { const [f, setF] = useState({ name: '', email: '', phone: '', type: 'Regular' }); const [show, setShow] = useState(false); return (

{t.clients}

{show && (
setF({...f, name: e.target.value})} /> setF({...f, phone: e.target.value})} /> setF({...f, email: e.target.value})} />
)}
{clients.map(c => (
{c.name?.[0]}

{c.name}

{c.phone || 'No phone'}

{c.type}

))}
); } // --- SERVICE MANAGER --- function ServiceManager({ services, onAdd, onDelete, t }) { const [n, setN] = useState(''); return (
setN(e.target.value)} />
{services.map(s => (
{s.name}
))}
); } // --- INVOICE MANAGER --- function InvoiceManager({ invoices, clients, projects, onAdd, onDelete, t }) { const [f, setF] = useState({ client: '', project: '' }); const [show, setShow] = useState(false); const [activeInv, setActiveInv] = useState(null); const clientProjects = useMemo(() => { return projects.filter(p => p.client === f.client); }, [projects, f.client]); return (

{t.invoices}

{show && (
)}
{invoices.map(inv => ( ))}
ClientProjectAmountActions
{inv.client} {inv.project} {inv.amount} MAD
{activeInv && (

Z MEDIA.

Billed to

{activeInv.client}

Project

{activeInv.project}

Total Amount Due: {activeInv.amount} MAD
)}
); } // --- TODO SYSTEM --- function TodoSystem({ todos, onAdd, onDelete, onUpdate, t }) { const [f, setF] = useState({ task: '', user: '' }); return (
setF({...f, task:e.target.value})} />
setF({...f, user:e.target.value})} />
{todos.map(todo => (

{todo.task}

Assigned to: {todo.user || 'Anyone'}

))}
); } // --- INBOX --- function Inbox({ messages, onDelete, t }) { return (
{messages.length === 0 &&
No Messages Yet
} {messages.map(m => (
{m.name?.[0]}

{m.name}

{m.email}

"{m.message}"

))}
); } function StatCard({ label, val, icon: Icon, color }) { return (

{label}

{val}

); } function Login({ setView, t }) { const [f, setF] = useState({ u: '', p: '' }); return (
{ e.preventDefault(); if(f.u==='admin'&&f.p==='admin') setView('dashboard'); }} className="space-y-6"> setF({...f,u:e.target.value})} /> setF({...f,p:e.target.value})} />
); }