function MainComponent() { const [activePhase, setActivePhase] = useState(null); const [progress, setProgress] = useState({ development: 0, preProduction: 0, production: 0, postProduction: 0 }); const phases = [ { id: "development", name: "التطوير", icon: "fa-lightbulb", tasks: [ "تطوير فكرة القصة", "كتابة السيناريو", "تصميم الشخصيات الأولي", "تحديد الأسلوب الفني", "وضع الميزانية المبدئية" ] }, { id: "preProduction", name: "ما قبل الإنتاج", icon: "fa-pencil-ruler", tasks: [ "تصميم الشخصيات النهائي", "تصميم الخلفيات", "رسم القصة المصورة", "تسجيل الأصوات المبدئي", "تحريك تجريبي" ] }, { id: "production", name: "الإنتاج", icon: "fa-paint-brush", tasks: [ "الرسم المتحرك الأساسي", "التلوين والتظليل", "إضافة المؤثرات البصرية", "تحريك الكاميرا", "المراجعة المرحلية" ] }, { id: "postProduction", name: "ما بعد الإنتاج", icon: "fa-film", tasks: [ "المونتاج النهائي", "تسجيل الموسيقى", "المؤثرات الصوتية", "المعالجة اللونية", "التصدير النهائي" ] } ]; useEffect(()=>{ const loadProgress = async ()=>{ try { const response = await fetch("/api/film-plan", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "get", type: "animation" }) }); if (!response.ok) { throw new Error("فشل تحميل البيانات"); } const data = await response.json(); if (data.progress) { setProgress(data.progress); } } catch (error) { console.error("Error loading progress:", error); } }; loadProgress(); }, []); const calculateTotalProgress = ()=>{ const values = Object.values(progress); return Math.round(values.reduce((a, b)=>a + b, 0) / values.length); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-6", dir: "rtl", __source: { fileName: "", lineNumber: 95, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mx-auto max-w-7xl", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 flex items-center justify-between", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "خطة إنتاج فيلم الرسوم المتحركة"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "نسبة الإنجاز الكلية: ", calculateTotalProgress(), "%"))), /*#__PURE__*/ React.createElement("div", { className: "mb-12 grid gap-8 md:grid-cols-4", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, phases.map((phase, index)=>/*#__PURE__*/ React.createElement("div", { key: phase.id, className: `relative ${index !== phases.length - 1 ? 'after:absolute after:top-1/2 after:h-0.5 after:w-full after:bg-gray-200 after:content-[""] md:after:right-full' : ""}`, __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative z-10 rounded-lg bg-white p-6 shadow transition-all hover:shadow-lg", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex items-center justify-center", __source: { fileName: "", lineNumber: 119, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `flex h-16 w-16 items-center justify-center rounded-full ${progress[phase.id] >= 100 ? "bg-green-100 text-green-600" : "bg-blue-100 text-blue-600"}`, __source: { fileName: "", lineNumber: 120, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${phase.icon} text-2xl`, __source: { fileName: "", lineNumber: 127, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("h3", { className: "mb-2 text-center text-lg font-medium text-gray-900", __source: { fileName: "", lineNumber: 130, columnNumber: 17 }, __self: this }, phase.name), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-2 rounded-full bg-gray-200", __source: { fileName: "", lineNumber: 134, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-2 rounded-full bg-blue-600 transition-all", style: { width: `${progress[phase.id]}%` }, __source: { fileName: "", lineNumber: 135, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-center text-sm text-gray-600", __source: { fileName: "", lineNumber: 140, columnNumber: 19 }, __self: this }, progress[phase.id], "% مكتمل")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActivePhase(phase), className: "w-full rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700", __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this }, "عرض التفاصيل"))))), activePhase && /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-white p-6 shadow", __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6 flex items-center justify-between", __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }, activePhase.name), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActivePhase(null), className: "text-gray-400 hover:text-gray-500", __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 165, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this }, activePhase.tasks.map((task, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center rounded-lg border border-gray-200 p-4", __source: { fileName: "", lineNumber: 170, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-4 flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-sm text-blue-600", __source: { fileName: "", lineNumber: 174, columnNumber: 19 }, __self: this }, index + 1), /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 177, columnNumber: 19 }, __self: this }, task))))))); }