Create src/components/ProjectWorkspace.tsx

src/components/ProjectWorkspace.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { FolderOpen, FileText, Calendar, ArrowRight } from 'lucide-react';
+
+export const ProjectWorkspace = ({ projects, activeProjectId, setActiveProject, t }) => {
+  const activeProject = projects.find(p => p.id === activeProjectId);
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
+        <h2 className="text-2xl font-bold text-slate-900 mb-2">{t.navProjects}</h2>
+        <p className="text-slate-500 text-sm">إدارة المسودات والمشاريع البحثية القائمة</p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {/* قائمة المشاريع على اليمين */}
+        <div className="md:col-span-1 space-y-4">
+          {projects.map((project) => (
+            <div 
+              key={project.id}
+              onClick={() => setActiveProject(project.id)}
+              className={`p-4 rounded-xl border cursor-pointer transition-all ${
+                activeProjectId === project.id 
+                ? 'border-emerald-500 bg-emerald-50 ring-1 ring-emerald-500' 
+                : 'border-slate-200 bg-white hover:border-emerald-300'
+              }`}
+            >
+              <div className="flex items-center gap-3 mb-2">
+                <FolderOpen className={`w-5 h-5 ${activeProjectId === project.id ? 'text-emerald-600' : 'text-slate-400'}`} />
+                <h3 className="font-bold text-slate-900 truncate">{project.name}</h3>
+              </div>
+              <div className="flex items-center text-[10px] text-slate-400 gap-2">
+                <Calendar className="w-3 h-3" />
+                {new Date(project.createdAt).toLocaleDateString('ar-EG')}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* تفاصيل المشروع المختار */}
+        <div className="md:col-span-2">
+          {activeProject ? (
+            <div className="bg-white rounded-2xl border border-slate-200 min-h-[400px] flex flex-col">
+              <div className="p-6 border-b border-slate-100">
+                <h2 className="text-xl font-bold text-slate-900">{activeProject.name}</h2>
+                <p className="text-slate-500 text-sm mt-1">{activeProject.description}</p>
+              </div>
+              
+              <div className="p-12 text-center flex-grow flex flex-col items-center justify-center space-y-4">
+                <div className="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center">
+                  <FileText className="w-8 h-8 text-slate-300" />
+                </div>
+                <div className="max-w-xs">
+                  <h3 className="font-bold text-slate-900 mb-1">المسودة فارغة</h3>
+                  <p className="text-sm text-slate-500">
+                    ابدأ بالبحث في "الباحث الذكي" وقم بتحويل المحادثات إلى هذا المشروع.
+                  </p>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="h-full flex items-center justify-center border-2 border-dashed border-slate-200 rounded-2xl p-12 text-slate-400">
+              اختر مشروعاً من القائمة أو ابدأ بحثاً جديداً
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};