import React, { useState } from 'react';
import { 
  Calendar, 
  CheckCircle, 
  Clock, 
  FileText, 
  Grid, 
  Home, 
  LayoutDashboard, 
  List, 
  MessageSquare, 
  PieChart, 
  Plus, 
  Settings, 
  Users, 
  Bell, 
  ChevronRight, 
  ChevronLeft,
  Instagram,
  Twitter,
  Search,
  Menu,
  X,
  Filter,
  MoreHorizontal,
  Edit,
  Trash,
  Eye,
  Upload,
  Download,
  ArrowUp,
  ArrowDown,
  CheckSquare,
  Square,
  ChevronDown,
  ChevronUp,
  Paperclip,
  Link,
  Share,
  User,
  LogOut,
  Moon,
  Sun,
  Globe,
  Lock,
  Mail,
  Phone,
  MapPin,
  AlertCircle,
  HelpCircle,
  Info,
  Briefcase,
  Image,
  Video,
  FileImage,
  FilePlus,
  FolderPlus,
  Folder,
  Star,
  StarHalf,
  BarChart2,
  PieChart as PieChartIcon,
  LineChart,
  TrendingUp,
  TrendingDown,
  ArrowUpRight,
  ArrowDownRight,
  Slash,
  XCircle,
  CheckCircle as CheckCircleIcon,
  AlertTriangle,
  Save,
  RefreshCw,
  ExternalLink,
  Clipboard,
  Copy
} from 'lucide-react';

// Main App Component
const MontagecoApp = () => {
  const [language, setLanguage] = useState('ar'); // 'ar' for Arabic, 'en' for English
  const [menuOpen, setMenuOpen] = useState(false);
  const [currentPage, setCurrentPage] = useState('dashboard');
  const [modalOpen, setModalOpen] = useState(false);
  const [modalType, setModalType] = useState('');
  const [modalData, setModalData] = useState(null);
  const [darkMode, setDarkMode] = useState(false);
  
  // Translations
  const translations = {
    en: {
      // General
      dashboard: "Dashboard",
      projects: "Projects",
      tasks: "Tasks",
      assets: "Assets",
      contentPlan: "Content Plan",
      clients: "Clients",
      team: "Team",
      reports: "Reports",
      settings: "Settings",
      messages: "Messages",
      search: "Search...",
      welcome: "Welcome back",
      notifications: "Notifications",
      viewAll: "View All",
      today: "Today",
      thisWeek: "This Week",
      add: "Add",
      edit: "Edit",
      delete: "Delete",
      view: "View",
      save: "Save",
      cancel: "Cancel",
      close: "Close",
      filter: "Filter",
      sort: "Sort",
      status: "Status",
      priority: "Priority",
      dueDate: "Due Date",
      assignedTo: "Assigned To",
      createdBy: "Created By",
      createdAt: "Created At",
      updatedAt: "Updated At",
      actions: "Actions",
      name: "Name",
      description: "Description",
      type: "Type",
      size: "Size",
      date: "Date",
      platform: "Platform",
      role: "Role",
      email: "Email",
      phone: "Phone",
      address: "Address",
      company: "Company",
      website: "Website",
      noProjectsFound: "No projects found",
      noTasksFound: "No tasks found",
      noFilesFound: "No files found",
      noContentFound: "No content found",
      noClientsFound: "No clients found",
      noTeamMembersFound: "No team members found",
      
      // Projects
      projectsOverview: "Projects Overview",
      activeProjects: "Active Projects",
      completedProjects: "Completed Projects",
      pendingProjects: "Pending Projects",
      archivedProjects: "Archived Projects",
      newProject: "New Project",
      projectName: "Project Name",
      projectDescription: "Project Description",
      projectStatus: "Project Status",
      projectBudget: "Project Budget",
      projectDeadline: "Project Deadline",
      projectClient: "Project Client",
      projectManager: "Project Manager",
      projectTeam: "Project Team",
      projectProgress: "Project Progress",
      projectDetails: "Project Details",
      
      // Tasks
      upcomingTasks: "Upcoming Tasks",
      completedTasks: "Completed Tasks",
      myTasks: "My Tasks",
      allTasks: "All Tasks",
      newTask: "New Task",
      taskName: "Task Name",
      taskDescription: "Task Description",
      taskStatus: "Task Status",
      taskPriority: "Task Priority",
      taskDueDate: "Task Due Date",
      taskProject: "Related Project",
      taskAssignee: "Assignee",
      taskDetails: "Task Details",
      
      // Assets
      recentFiles: "Recent Files",
      allFiles: "All Files",
      uploadFile: "Upload File",
      fileName: "File Name",
      fileType: "File Type",
      fileSize: "File Size",
      fileUploadDate: "Upload Date",
      fileDetails: "File Details",
      designs: "Designs",
      documents: "Documents",
      images: "Images",
      
      // Content Plan
      contentCalendar: "Content Calendar",
      scheduledContent: "Scheduled Content",
      publishedContent: "Published Content",
      newContent: "New Content",
      contentTitle: "Content Title",
      contentDescription: "Content Description",
      contentPlatform: "Platform",
      contentPublishDate: "Publish Date",
      contentStatus: "Content Status",
      contentProject: "Related Project",
      contentDetails: "Content Details",
      all: "All",
      
      // Clients
      clientsList: "Clients List",
      newClient: "New Client",
      clientName: "Client Name",
      clientEmail: "Client Email",
      clientPhone: "Client Phone",
      clientCompany: "Client Company",
      clientAddress: "Client Address",
      clientWebsite: "Client Website",
      clientProjects: "Client Projects",
      clientDetails: "Client Details",
      
      // Team
      teamMembers: "Team Members",
      teamPerformance: "Team Performance",
      newTeamMember: "New Team Member",
      memberName: "Member Name",
      memberEmail: "Member Email",
      memberPhone: "Member Phone",
      memberRole: "Member Role",
      memberProjects: "Member Projects",
      memberTasks: "Member Tasks",
      memberPerformance: "Member Performance",
      memberDetails: "Member Details",
      
      // Reports
      performanceReports: "Performance Reports",
      projectReports: "Project Reports",
      teamReports: "Team Reports",
      clientReports: "Client Reports",
      financialReports: "Financial Reports",
      generateReport: "Generate Report",
      reportType: "Report Type",
      reportPeriod: "Report Period",
      reportFormat: "Report Format",
      
      // Settings
      generalSettings: "General Settings",
      accountSettings: "Account Settings",
      notificationSettings: "Notification Settings",
      securitySettings: "Security Settings",
      languageSettings: "Language Settings",
      themeSettings: "Theme Settings",
      roleSettings: "Role Settings",
      
      // Status
      active: "Active",
      inactive: "Inactive",
      pending: "Pending",
      inProgress: "In Progress",
      completed: "Completed",
      cancelled: "Cancelled",
      archived: "Archived",
      scheduled: "Scheduled",
      published: "Published",
      
      // Priority
      high: "High",
      medium: "Medium",
      low: "Low",
      
      // Months
      january: "January",
      february: "February",
      march: "March",
      april: "April",
      may: "May",
      june: "June",
      july: "July",
      august: "August",
      september: "September",
      october: "October",
      november: "November",
      december: "December",
      
      // Social Media
      instagram: "Instagram",
      twitter: "Twitter",
      tiktok: "TikTok",
      googleMaps: "Google Maps",
      
      // Task Types
      designTask: "Design Task",
      editTask: "Edit Task",
      designReview: "Design Review",
      clientFeedback: "Client Feedback",
      finalApproval: "Final Approval",
      
      // Roles
      owner: "Owner",
      projectManager: "Project Manager",
      projectSupervisor: "Project Supervisor",
      designManager: "Design Manager",
      designer: "Designer",
      client: "Client",
      
      // Notifications
      newTaskAssigned: "New task assigned",
      taskStatusChanged: "Task status changed",
      projectDeadlineApproaching: "Project deadline approaching",
      clientCommentAdded: "Client added a comment",
      designApproved: "Design approved",
      
      // Misc
      darkMode: "Dark Mode",
      lightMode: "Light Mode",
      logout: "Logout",
      profile: "Profile",
      help: "Help",
      support: "Support",
      termsOfService: "Terms of Service",
      privacyPolicy: "Privacy Policy",
    },
    ar: {
      // General
      dashboard: "لوحة التحكم",
      projects: "المشاريع",
      tasks: "المهام",
      assets: "الأصول",
      contentPlan: "خطة المحتوى",
      clients: "العملاء",
      team: "الفريق",
      reports: "التقارير",
      settings: "الإعدادات",
      messages: "الرسائل",
      search: "بحث...",
      welcome: "مرحباً بعودتك",
      notifications: "الإشعارات",
      viewAll: "عرض الكل",
      today: "اليوم",
      thisWeek: "هذا الأسبوع",
      add: "إضافة",
      edit: "تعديل",
      delete: "حذف",
      view: "عرض",
      save: "حفظ",
      cancel: "إلغاء",
      close: "إغلاق",
      filter: "تصفية",
      sort: "ترتيب",
      status: "الحالة",
      priority: "الأولوية",
      dueDate: "تاريخ الاستحقاق",
      assignedTo: "مُسند إلى",
      createdBy: "أنشئ بواسطة",
      createdAt: "تاريخ الإنشاء",
      updatedAt: "تاريخ التحديث",
      actions: "إجراءات",
      name: "الاسم",
      description: "الوصف",
      type: "النوع",
      size: "الحجم",
      date: "التاريخ",
      platform: "المنصة",
      role: "الدور",
      email: "البريد الإلكتروني",
      phone: "الهاتف",
      address: "العنوان",
      company: "الشركة",
      website: "الموقع الإلكتروني",
      noProjectsFound: "لم يتم العثور على مشاريع",
      noTasksFound: "لم يتم العثور على مهام",
      noFilesFound: "لم يتم العثور على ملفات",
      noContentFound: "لم يتم العثور على محتوى",
      noClientsFound: "لم يتم العثور على عملاء",
      noTeamMembersFound: "لم يتم العثور على أعضاء فريق",
      
      // Projects
      projectsOverview: "نظرة عامة على المشاريع",
      activeProjects: "المشاريع النشطة",
      completedProjects: "المشاريع المكتملة",
      pendingProjects: "المشاريع قيد الانتظار",
      archivedProjects: "المشاريع المؤرشفة",
      newProject: "مشروع جديد",
      projectName: "اسم المشروع",
      projectDescription: "وصف المشروع",
      projectStatus: "حالة المشروع",
      projectBudget: "ميزانية المشروع",
      projectDeadline: "الموعد النهائي للمشروع",
      projectClient: "عميل المشروع",
      projectManager: "مدير المشروع",
      projectTeam: "فريق المشروع",
      projectProgress: "تقدم المشروع",
      projectDetails: "تفاصيل المشروع",
      
      // Tasks
      upcomingTasks: "المهام القادمة",
      completedTasks: "المهام المكتملة",
      myTasks: "مهامي",
      allTasks: "جميع المهام",
      newTask: "مهمة جديدة",
      taskName: "اسم المهمة",
      taskDescription: "وصف المهمة",
      taskStatus: "حالة المهمة",
      taskPriority: "أولوية المهمة",
      taskDueDate: "تاريخ استحقاق المهمة",
      taskProject: "المشروع المرتبط",
      taskAssignee: "المسؤول",
      taskDetails: "تفاصيل المهمة",
      
      // Assets
      recentFiles: "الملفات الحديثة",
      allFiles: "جميع الملفات",
      uploadFile: "رفع ملف",
      fileName: "اسم الملف",
      fileType: "نوع الملف",
      fileSize: "حجم الملف",
      fileUploadDate: "تاريخ الرفع",
      fileDetails: "تفاصيل الملف",
      designs: "التصاميم",
      documents: "المستندات",
      images: "الصور",
      
      // Content Plan
      contentCalendar: "تقويم المحتوى",
      scheduledContent: "المحتوى المجدول",
      publishedContent: "المحتوى المنشور",
      newContent: "محتوى جديد",
      contentTitle: "عنوان المحتوى",
      contentDescription: "وصف المحتوى",
      contentPlatform: "المنصة",
      contentPublishDate: "تاريخ النشر",
      contentStatus: "حالة المحتوى",
      contentProject: "المشروع المرتبط",
      contentDetails: "تفاصيل المحتوى",
      all: "الكل",
      
      // Clients
      clientsList: "قائمة العملاء",
      newClient: "عميل جديد",
      clientName: "اسم العميل",
      clientEmail: "البريد الإلكتروني للعميل",
      clientPhone: "هاتف العميل",
      clientCompany: "شركة العميل",
      clientAddress: "عنوان العميل",
      clientWebsite: "موقع العميل الإلكتروني",
      clientProjects: "مشاريع العميل",
      clientDetails: "تفاصيل العميل",
      
      // Team
      teamMembers: "أعضاء الفريق",
      teamPerformance: "أداء الفريق",
      newTeamMember: "عضو فريق جديد",
      memberName: "اسم العضو",
      memberEmail: "البريد الإلكتروني للعضو",
      memberPhone: "هاتف العضو",
      memberRole: "دور العضو",
      memberProjects: "مشاريع العضو",
      memberTasks: "مهام العضو",
      memberPerformance: "أداء العضو",
      memberDetails: "تفاصيل العضو",
      
      // Reports
      performanceReports: "تقارير الأداء",
      projectReports: "تقارير المشاريع",
      teamReports: "تقارير الفريق",
      clientReports: "تقارير العملاء",
      financialReports: "التقارير المالية",
      generateReport: "إنشاء تقرير",
      reportType: "نوع التقرير",
      reportPeriod: "فترة التقرير",
      reportFormat: "تنسيق التقرير",
      
      // Settings
      generalSettings: "الإعدادات العامة",
      accountSettings: "إعدادات الحساب",
      notificationSettings: "إعدادات الإشعارات",
      securitySettings: "إعدادات الأمان",
      languageSettings: "إعدادات اللغة",
      themeSettings: "إعدادات المظهر",
      roleSettings: "إعدادات الأدوار",
      
      // Status
      active: "نشط",
      inactive: "غير نشط",
      pending: "قيد الانتظار",
      inProgress: "قيد التنفيذ",
      completed: "مكتمل",
      cancelled: "ملغي",
      archived: "مؤرشف",
      scheduled: "مجدول",
      published: "منشور",
      
      // Priority
      high: "عالية",
      medium: "متوسطة",
      low: "منخفضة",
      
      // Months
      january: "يناير",
      february: "فبراير",
      march: "مارس",
      april: "أبريل",
      may: "مايو",
      june: "يونيو",
      july: "يوليو",
      august: "أغسطس",
      september: "سبتمبر",
      october: "أكتوبر",
      november: "نوفمبر",
      december: "ديسمبر",
      
      // Social Media
      instagram: "انستغرام",
      twitter: "تويتر",
      tiktok: "تيك توك",
      googleMaps: "خرائط جوجل",
      
      // Task Types
      designTask: "مهمة تصميم",
      editTask: "مهمة تعديل",
      designReview: "مراجعة تصميم",
      clientFeedback: "ملاحظات العميل",
      finalApproval: "الموافقة النهائية",
      
      // Roles
      owner: "مالك",
      projectManager: "مدير مشروع",
      projectSupervisor: "مشرف مشروع",
      designManager: "مدير تصميم",
      designer: "مصمم",
      client: "عميل",
      
      // Notifications
      newTaskAssigned: "تم تعيين مهمة جديدة لك",
      taskStatusChanged: "تم تغيير حالة المهمة",
      projectDeadlineApproaching: "موعد تسليم المشروع يقترب",
      clientCommentAdded: "أضاف العميل تعليقًا جديدًا",
      designApproved: "تمت الموافقة على التصميم",
      
      // Misc
      darkMode: "الوضع الداكن",
      lightMode: "الوضع الفاتح",
      logout: "تسجيل الخروج",
      profile: "الملف الشخصي",
      help: "المساعدة",
      support: "الدعم",
      termsOfService: "شروط الخدمة",
      privacyPolicy: "سياسة الخصوصية",
    }
  };
  
  // Helper function to get text based on current language
  const t = (key) => translations[language][key] || key;
  
  // Mock data for projects
  const projectsData = [
    { id: 1, name: 'Brand X Rebranding', client: 'Brand X Corp', status: 'active', progress: 75, deadline: '2023-12-25', budget: '$5,000', manager: 'محمد أحمد' },
    { id: 2, name: 'Tech Co Website', client: 'Tech Co', status: 'active', progress: 45, deadline: '2024-01-15', budget: '$8,500', manager: 'سارة خالد' },
    { id: 3, name: 'Fashion Z Campaign', client: 'Fashion Z', status: 'pending', progress: 10, deadline: '2024-01-30', budget: '$12,000', manager: 'أحمد علي' },
    { id: 4, name: 'Cafe Y Menu Design', client: 'Cafe Y', status: 'completed', progress: 100, deadline: '2023-12-05', budget: '$1,800', manager: 'ليلى محمد' },
    { id: 5, name: 'Hotel Z Brochure', client: 'Hotel Z', status: 'archived', progress: 100, deadline: '2023-11-20', budget: '$3,200', manager: 'محمد أحمد' },
    { id: 6, name: 'Restaurant A Menu', client: 'Restaurant A', status: 'active', progress: 60, deadline: '2023-12-30', budget: '$2,500', manager: 'سارة خالد' },
    { id: 7, name: 'Gym B Social Media', client: 'Gym B', status: 'active', progress: 35, deadline: '2024-01-10', budget: '$4,800', manager: 'أحمد علي' },
    { id: 8, name: 'Clinic C Website', client: 'Clinic C', status: 'pending', progress: 5, deadline: '2024-02-15', budget: '$7,500', manager: 'ليلى محمد' },
  ];
  
  // Mock data for tasks
  const tasksData = [
    { id: 1, name: t('designTask'), project: 'Brand X Rebranding', dueDate: '2023-12-15', assignedTo: 'محمد أحمد', priority: 'high', status: 'inProgress' },
    { id: 2, name: t('editTask'), project: 'Tech Co Website', dueDate: '2023-12-16', assignedTo: 'سارة خالد', priority: 'medium', status: 'pending' },
    { id: 3, name: t('designReview'), project: 'Fashion Z Campaign', dueDate: '2023-12-14', assignedTo: 'أحمد علي', priority: 'high', status: 'pending' },
    { id: 4, name: t('clientFeedback'), project: 'Cafe Y Menu Design', dueDate: '2023-12-13', assignedTo: 'ليلى محمد', priority: 'low', status: 'completed' },
    { id: 5, name: t('finalApproval'), project: 'Hotel Z Brochure', dueDate: '2023-12-12', assignedTo: 'محمد أحمد', priority: 'medium', status: 'completed' },
    { id: 6, name: t('designTask'), project: 'Restaurant A Menu', dueDate: '2023-12-18', assignedTo: 'سارة خالد', priority: 'high', status: 'inProgress' },
    { id: 7, name: t('editTask'), project: 'Gym B Social Media', dueDate: '2023-12-20', assignedTo: 'أحمد علي', priority: 'low', status: 'pending' },
    { id: 8, name: t('designReview'), project: 'Clinic C Website', dueDate: '2023-12-22', assignedTo: 'ليلى محمد', priority: 'medium', status: 'inProgress' },
  ];
  
  // Mock data for content calendar
  const contentCalendarData = [
    { id: 1, title: 'Brand X New Logo Reveal', platform: 'instagram', date: '2023-12-15', project: 'Brand X Rebranding', status: 'scheduled' },
    { id: 2, title: 'Tech Co Product Launch', platform: 'twitter', date: '2023-12-16', project: 'Tech Co Website', status: 'published' },
    { id: 3, title: 'Fashion Z Summer Collection', platform: 'tiktok', date: '2023-12-17', project: 'Fashion Z Campaign', status: 'scheduled' },
    { id: 4, title: 'Cafe Y New Menu Items', platform: 'instagram', date: '2023-12-18', project: 'Cafe Y Menu Design', status: 'scheduled' },
    { id: 5, title: 'Hotel Z Facilities Tour', platform: 'instagram', date: '2023-12-19', project: 'Hotel Z Brochure', status: 'published' },
    { id: 6, title: 'Restaurant A Chef Interview', platform: 'twitter', date: '2023-12-20', project: 'Restaurant A Menu', status: 'scheduled' },
    { id: 7, title: 'Gym B Workout Tips', platform: 'tiktok', date: '2023-12-21', project: 'Gym B Social Media', status: 'scheduled' },
    { id: 8, title: 'Clinic C Health Tips', platform: 'instagram', date: '2023-12-22', project: 'Clinic C Website', status: 'scheduled' },
  ];
  
  // Mock data for assets
  const assetsData = [
    { id: 1, name: 'Brand X Logo Final.ai', type: 'design', project: 'Brand X Rebranding', date: '2023-12-12', size: '2.4 MB' },
    { id: 2, name: 'Tech Co Social Media Kit.psd', type: 'design', project: 'Tech Co Website', date: '2023-12-11', size: '15.7 MB' },
    { id: 3, name: 'Fashion Z Contract.pdf', type: 'document', project: 'Fashion Z Campaign', date: '2023-12-10', size: '1.2 MB' },
    { id: 4, name: 'Cafe Y Menu Design.ai', type: 'design', project: 'Cafe Y Menu Design', date: '2023-12-09', size: '4.5 MB' },
    { id: 5, name: 'Hotel Z Brochure Draft.pdf', type: 'document', project: 'Hotel Z Brochure', date: '2023-12-08', size: '3.8 MB' },
    { id: 6, name: 'Restaurant A Menu Photos.zip', type: 'image', project: 'Restaurant A Menu', date: '2023-12-07', size: '28.2 MB' },
    { id: 7, name: 'Gym B Logo Variations.ai', type: 'design', project: 'Gym B Social Media', date: '2023-12-06', size: '5.1 MB' },
    { id: 8, name: 'Clinic C Website Wireframes.sketch', type: 'design', project: 'Clinic C Website', date: '2023-12-05', size: '8.7 MB' },
  ];
  
  // Mock data for clients
  const clientsData = [
    { id: 1, name: 'Brand X Corp', contact: 'John Smith', email: 'john@brandx.com', phone: '+1 234 567 890', projects: 1 },
    { id: 2, name: 'Tech Co', contact: 'Sarah Johnson', email: 'sarah@techco.com', phone: '+1 234 567 891', projects: 1 },
    { id: 3, name: 'Fashion Z', contact: 'Michael Brown', email: 'michael@fashionz.com', phone: '+1 234 567 892', projects: 1 },
    { id: 4, name: 'Cafe Y', contact: 'Emily Davis', email: 'emily@cafey.com', phone: '+1 234 567 893', projects: 1 },
    { id: 5, name: 'Hotel Z', contact: 'David Wilson', email: 'david@hotelz.com', phone: '+1 234 567 894', projects: 1 },
    { id: 6, name: 'Restaurant A', contact: 'Jennifer Lee', email: 'jennifer@restauranta.com', phone: '+1 234 567 895', projects: 1 },
    { id: 7, name: 'Gym B', contact: 'Robert Taylor', email: 'robert@gymb.com', phone: '+1 234 567 896', projects: 1 },
    { id: 8, name: 'Clinic C', contact: 'Lisa Anderson', email: 'lisa@clinicc.com', phone: '+1 234 567 897', projects: 1 },
  ];
  
  // Mock data for team members
  const teamMembersData = [
    { id: 1, name: 'محمد أحمد', role: 'projectManager', email: 'mohamed@montageco.com', phone: '+966 50 123 4567', tasksCompleted: 24, onTime: '95%' },
    { id: 2, name: 'سارة خالد', role: 'projectManager', email: 'sarah@montageco.com', phone: '+966 50 123 4568', tasksCompleted: 18, onTime: '92%' },
    { id: 3, name: 'أحمد علي', role: 'designManager', email: 'ahmed@montageco.com', phone: '+966 50 123 4569', tasksCompleted: 15, onTime: '88%' },
    { id: 4, name: 'ليلى محمد', role: 'designer', email: 'layla@montageco.com', phone: '+966 50 123 4570', tasksCompleted: 21, onTime: '94%' },
    { id: 5, name: 'خالد عمر', role: 'designer', email: 'khaled@montageco.com', phone: '+966 50 123 4571', tasksCompleted: 19, onTime: '90%' },
    { id: 6, name: 'فاطمة علي', role: 'designer', email: 'fatima@montageco.com', phone: '+966 50 123 4572', tasksCompleted: 17, onTime: '89%' },
    { id: 7, name: 'عمر حسن', role: 'projectSupervisor', email: 'omar@montageco.com', phone: '+966 50 123 4573', tasksCompleted: 22, onTime: '93%' },
    { id: 8, name: 'نورة سعيد', role: 'owner', email: 'noura@montageco.com', phone: '+966 50 123 4574', tasksCompleted: 10, onTime: '97%' },
  ];
  
  // Mock data for notifications
  const notificationsData = [
    { id: 1, type: 'task', message: t('newTaskAssigned'), time: '10:30 AM', read: false },
    { id: 2, type: 'comment', message: t('clientCommentAdded'), time: '09:15 AM', read: false },
    { id: 3, type: 'deadline', message: t('projectDeadlineApproaching'), time: 'Yesterday', read: true },
    { id: 4, type: 'approval', message: t('designApproved'), time: 'Yesterday', read: true },
    { id: 5, type: 'task', message: t('taskStatusChanged'), time: '2 days ago', read: true },
    { id: 6, type: 'comment', message: t('clientCommentAdded'), time: '2 days ago', read: true },
    { id: 7, type: 'deadline', message: t('projectDeadlineApproaching'), time: '3 days ago', read: true },
    { id: 8, type: 'approval', message: t('designApproved'), time: '3 days ago', read: true },
  ];
  
  // Get priority color
  const getPriorityColor = (priority) => {
    switch(priority) {
      case 'high': return 'bg-red-100 text-red-800';
      case 'medium': return 'bg-yellow-100 text-yellow-800';
      case 'low': return 'bg-green-100 text-green-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };
  
  // Get status color
  const getStatusColor = (status) => {
    switch(status) {
      case 'completed': return 'bg-green-100 text-green-800';
      case 'inProgress': return 'bg-blue-100 text-blue-800';
      case 'pending': return 'bg-yellow-100 text-yellow-800';
      case 'cancelled': return 'bg-red-100 text-red-800';
      case 'active': return 'bg-blue-100 text-blue-800';
      case 'archived': return 'bg-gray-100 text-gray-800';
      case 'published': return 'bg-green-100 text-green-800';
      case 'scheduled': return 'bg-yellow-100 text-yellow-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };
  
  // Get platform icon
  const getPlatformIcon = (platform) => {
    switch(platform) {
      case 'instagram': return <Instagram className="w-4 h-4" />;
      case 'twitter': return <Twitter className="w-4 h-4" />;
      case 'tiktok': return <span className="text-xs font-bold">TT</span>;
      default: return null;
    }
  };
  
  // Get file type icon
  const getFileTypeIcon = (type) => {
    switch(type) {
      case 'design': return <FileImage className="w-4 h-4" />;
      case 'document': return <FileText className="w-4 h-4" />;
      case 'image': return <Image className="w-4 h-4" />;
      case 'video': return <Video className="w-4 h-4" />;
      default: return <FileText className="w-4 h-4" />;
    }
  };
  
  // Toggle language
  const toggleLanguage = () => {
    setLanguage(language === 'ar' ? 'en' : 'ar');
  };
  
  // Toggle mobile menu
  const toggleMenu = () => {
    setMenuOpen(!menuOpen);
  };
  
  // Toggle dark mode
  const toggleDarkMode = () => {
    setDarkMode(!darkMode);
  };
  
  // Open modal
  const openModal = (type, data = null) => {
    setModalType(type);
    setModalData(data);
    setModalOpen(true);
  };
  
  // Close modal
  const closeModal = () => {
    setModalOpen(false);
    setModalType('');
    setModalData(null);
  };
  
  // Navigate to page
  const navigateTo = (page) => {
    setCurrentPage(page);
    setMenuOpen(false);
  };
  
  // Render page content based on current page
  const renderPageContent = () => {
    switch(currentPage) {
      case 'dashboard':
        return <DashboardPage t={t} projectsData={projectsData} tasksData={tasksData} contentCalendarData={contentCalendarData} assetsData={assetsData} teamMembersData={teamMembersData} notificationsData={notificationsData} openModal={openModal} navigateTo={navigateTo} />;
      case 'projects':
        return <ProjectsPage t={t} projectsData={projectsData} openModal={openModal} />;
      case 'tasks':
        return <TasksPage t={t} tasksData={tasksData} projectsData={projectsData} teamMembersData={teamMembersData} openModal={openModal} />;
      case 'assets':
        return <AssetsPage t={t} assetsData={assetsData} projectsData={projectsData} openModal={openModal} />;
      case 'contentPlan':
        return <ContentPlanPage t={t} contentCalendarData={contentCalendarData} projectsData={projectsData} openModal={openModal} />;
      case 'clients':
        return <ClientsPage t={t} clientsData={clientsData} projectsData={projectsData} openModal={openModal} />;
      case 'team':
        return <TeamPage t={t} teamMembersData={teamMembersData} tasksData={tasksData} projectsData={projectsData} openModal={openModal} />;
      case 'reports':
        return <ReportsPage t={t} projectsData={projectsData} tasksData={tasksData} teamMembersData={teamMembersData} clientsData={clientsData} />;
      case 'settings':
        return <SettingsPage t={t} language={language} darkMode={darkMode} toggleLanguage={toggleLanguage} toggleDarkMode={toggleDarkMode} />;
      case 'messages':
        return <MessagesPage t={t} teamMembersData={teamMembersData} clientsData={clientsData} />;
      default:
        return <DashboardPage t={t} projectsData={projectsData} tasksData={tasksData} contentCalendarData={contentCalendarData} assetsData={assetsData} teamMembersData={teamMembersData} notificationsData={notificationsData} openModal={openModal} navigateTo={navigateTo} />;
    }
  };
  
  // Dashboard Page Component
  const DashboardPage = ({ t, projectsData, tasksData, contentCalendarData, assetsData, teamMembersData, notificationsData, openModal, navigateTo }) => {
    // Count projects by status
    const projectCounts = {
      active: projectsData.filter(project => project.status === 'active').length,
      completed: projectsData.filter(project => project.status === 'completed').length,
      pending: projectsData.filter(project => project.status === 'pending').length,
      archived: projectsData.filter(project => project.status === 'archived').length
    };
    
    return (
      <>
        {/* Welcome Section */}
        <div className="mb-8">
          <h1 className="text-2xl font-bold">{t('welcome')}</h1>
          <p className="text-gray-600 dark:text-gray-400 mt-1">2023 {t('december')}, 14</p>
        </div>
        
        {/* Projects Overview */}
        <section className="mb-8">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-semibold">{t('projectsOverview')}</h2>
            <button 
              onClick={() => openModal('newProject')}
              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center"
            >
              <Plus className="w-4 h-4 mr-2 rtl:ml-2 rtl:mr-0" />
              {t('newProject')}
            </button>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-100 dark:border-gray-700">
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-gray-500 dark:text-gray-400 text-sm font-medium">{t('activeProjects')}</h3>
                <div className="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
                  <Grid className="w-5 h-5 text-blue-600 dark:text-blue-400" />
                </div>
              </div>
              <p className="text-3xl font-bold">{projectCounts.active}</p>
              <p className="text-green-600 dark:text-green-400 text-sm mt-2 flex items-center">
                <span className="flex items-center">
                  <ChevronRight className={`w-4 h-4 ${language === 'ar' ? 'rotate-180' : ''}`} />
                  +2 {t('thisWeek')}
                </span>
              </p>
            </div>
            
            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-100 dark:border-gray-700">
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-gray-500 dark:text-gray-400 text-sm font-medium">{t('completedProjects')}</h3>
                <div className="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
                  <CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" />
                </div>
              </div>
              <p className="text-3xl font-bold">{projectCounts.completed}</p>
              <p className="text-green-600 dark:text-green-400 text-sm mt-2 flex items-center">
                <span className="flex items-center">
                  <ChevronRight className={`w-4 h-4 ${language === 'ar' ? 'rotate-180' : ''}`} />
                  +5 {t('thisWeek')}
                </span>
              </p>
            </div>
            
            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-100 dark:border-gray-700">
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-gray-500 dark:text-gray-400 text-sm font-medium">{t('pendingProjects')}</h3>
                <div className="w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center">
                  <Clock className="w-5 h-5 text-yellow-600 dark:text-yellow-400" />
                </div>
              </div>
              <p className="text-3xl font-bold">{projectCounts.pending}</p>
              <p className="text-red-600 dark:text-red-400 text-sm mt-2 flex items-center">
                <span className="flex items-center">
                  <ChevronRight className={`w-4 h-4 ${language === 'ar' ? 'rotate-180' : ''}`} />
                  -1 {t('thisWeek')}
                </span>
              </p>
            </div>
            
            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-100 dark:border-gray-700">
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-gray-500 dark:text-gray-400 text-sm font-medium">{t('archivedProjects')}</h3>
                <div className="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
                  <FileText className="w-5 h-5 text-gray-600 dark:text-gray-400" />
                </div>
              </div>
              <p className="text-3xl font-bold">{projectCounts.archived}</p>
              <p className="text-gray-600 dark:text-gray-400 text-sm mt-2 flex items-center">
                <span className="flex items-center">
                  <ChevronRight className={`w-4 h-4 ${language === 'ar' ? 'rotate-180' : ''}`} />
                  +0 {t('thisWeek')}
                </span>
              </p>
            </div>
          </div>
        </section>
        
        {/* Tasks and Content Calendar */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
          {/* Upcoming Tasks */}
          <section className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700 p-6">
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-lg font-semibold">{t('upcomingTasks')}</h2>
              <button 
                onClick={() => openModal('newTask')}
                className="text-blue-600 dark:text-blue-400 text-sm font-medium hover:underline flex items-center"
              >
                <Plus className="w-4 h-4 mr-1 rtl:ml-1 rtl:mr-0" />
                {t('add')}
              </button>
            </div>
            
            <div className="space-y-4">
              {tasksData.slice(0, 4).map(task => (
                <div key={task.id} className="border-b border-gray-100 dark:border-gray-700 pb-4 last:border-0 last:pb-0">
                  <div className="flex items-center justify-between mb-2">
                    <h3 className="font-medium">{task.name}</h3>
                    <span className={`text-xs px-2 py-1 rounded-full ${getPriorityColor(task.priority)}`}>
                      {t(task.priority)}
                    </span>
                  </div>
                  <div className="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-2">
                    <span className="mr-3 rtl:ml-3 rtl:mr-0">{task.project}</span>
                    <span>{task.dueDate}</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center">
                      <div className="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs">
                        {task.assignedTo.charAt(0)}
                      </div>
                      <span className="text-sm text-gray-600 dark:text-gray-400 ml-2 rtl:mr-2 rtl:ml-0">{task.assignedTo}</span>
                    </div>
                    <span className={`text-xs px-2 py-1 rounded-full ${getStatusColor(task.status)}`}>
                      {t(task.status)}
                    </span>
                  </div>
                </div>
              ))}
            </div>
            
            <button 
              onClick={() => navigateTo('tasks')}
              className="mt-6 w-full py-2 border border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400 rounded-md hover:bg-blue-50 dark:hover:bg-blue-900/20 font-medium flex items-center justify-center"
            >
              <Eye className="w-4 h-4 mr-2 rtl:ml-2 rtl:mr-0" />
              {t('viewAll')}
            </button>
          </section>
          
          {/* Content Calendar */}
          <section className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700 p-6">
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-lg font-semibold">{t('contentCalendar')}</h2>
              <button 
                onClick={() => openModal('newContent')}
                className="text-blue-600 dark:text-blue-400 text-sm font-medium hover:underline flex items-center"
              >
                <Plus className="w-4 h-4 mr-1 rtl:ml-1 rtl:mr-0" />
                {t('add')}
              </button>
            </div>
            
            <div className="space-y-4">
              {contentCalendarData.slice(0, 4).map(content => (
                <div key={content.id} className="flex items-center p-3 border border-gray-100 dark:border-gray-700 rounded-lg">
                  <div className="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-3 rtl:ml-3 rtl:mr-0">
                    {getPlatformIcon(content.platform)}
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center justify-between mb-1">
                      <h3 className="font-medium">{content.title}</h3>
                      <span className="text-sm text-gray-500 dark:text-gray-400">{content.date}</span>
                    </div>
                    <p className="text-sm text-gray-600 dark:text-gray-400">{content.project}</p>
                  </div>
                  <div className={`ml-4 rtl:mr-4 rtl:ml-0 w-3 h-3 rounded-full ${content.status === 'published' ? 'bg-green-500' : 'bg-yellow-500'}`}></div>
                </div>
              ))}
            </div>
            
            <button 
              onClick={() => navigateTo('contentPlan')}
              className="mt-6 w-full py-2 border border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400 rounded-md hover:bg-blue-50 dark:hover:bg-blue-900/20 font-medium flex items-center justify-center"
            >
              <Eye className="w-4 h-4 mr-2 rtl:ml-2 rtl:mr-0" />
              {t('viewAll')}
            </button>
          </section>
        </div>
        
        {/* Recent Files and Team Performance */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
          {/* Recent Files */}
          <section className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700 p-6">
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-lg font-semibold">{t('recentFiles')}</h2>
              <button 
                onClick={() => openModal('uploadFile')}
                className="text-blue-600 dark:text-blue-400 text-sm font-medium hover:underline flex items-center"
              >
                <Upload className="w-4 h-4 mr-1 rtl:ml-1 rtl:mr-0" />
                {t('uploadFile')}
              </button>
            </div>
            
            <div className="space-y-4">
              {assetsData.slice(0, 4).map(file => (
                <div key={file.id} className="flex items-center p-3 border border-gray-100 dark:border-gray-700 rounded-lg">
                  <div className="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-3 rtl:ml-3 rtl:mr-0">
                    {getFileTypeIcon(file.type)}
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center justify-between mb-1">
                      <h3 className="font-medium">{file.name}</h3>
                      <span className="text-sm text-gray-500 dark:text-gray-400">{file.size}</span>
                    </div>
                    <p className="text-sm text-gray-600 dark:text-gray-400">{file.project}</p>
                  </div>
                  <button 
                    onClick={() => openModal('viewFile', file)}
                    className="ml-2 rtl:mr-2 rtl:ml-0 p-1 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 rounded-full"
                  >
                    <Eye className="w-4 h-4" />
                  </button>
                </div>
              ))}
            </div>
            
            <button 
              onClick={() => navigateTo('assets')}
              className="mt-6 w-full py-2 border border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400 rounded-md hover:bg-blue-50 dark:hover:bg-blue-900/20 font-medium flex items-center justify-center"
            >
              <Eye className="w-4 h-4 mr-2 rtl:ml-2 rtl:mr-0" />
              {t('viewAll')}
            </button>
          </section>
          
          {/* Team Performance */}
          <section className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700 p-6">
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-lg font-semibold">{t('teamPerformance')}</h2>
              <button 
                onClick={() => navigateTo('team')}
                className="text-blue-600 dark:text-blue-400 text-sm font-medium hover:underline"
              >
                {t('viewAll')}
              </button>
            </div>
            
            <div className="space-y-4">
              {teamMembersData.slice(0, 4).map(member => (
                <div key={member.id} className="flex items-center justify-between p-3 border border-gray-100 dark:border-gray-700 rounded-lg">
                  <div className="flex items-center">
                    <div className="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium mr-3 rtl:ml-3 rtl:mr-0">
                      {member.name.charAt(0)}
                    </div>
                    <div>
                      <h3 className="font-medium">{member.name}</h3>
                      <p className="text-sm text-gray-600 dark:text-gray-400">{member.tasksCompleted} {t('tasks')}</p>
                    </div>
                  </div>
                  <div className="text-green-600 dark:text-green-400 font-medium">{member.onTime}</div>
                </div>
              ))}
            </div>
          </section>
        </div>
        
        {/* Notifications */}
        <section className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700 p-6">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-lg font-semibold">{t('notifications')}</h2>
            <button className="text-blue-600 dark:text-blue-400 text-sm font-medium hover:underline">
              {t('viewAll')}
            </button>
          </div>
          
          <div className="space-y-4">
            {notificationsData.slice(0, 4).map(notification => (
              <div key={notification.id} className="flex items-start p-3 border border-gray-100 dark:border-gray-700 rounded-lg">
                <div className="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-3 rtl:ml-3 rtl:mr-0">
                  <Bell className="w-5 h-5 text-blue-600 dark:text-blue-400" />
                </div>
                <div className="flex-1">
                  <div className="flex items-center justify-between mb-1">
                    <h3 className="font-medium">{notification.message}</h3>
                    <span className="text-sm text-gray-500 dark:text-gray-400">{notification.time}</span>
                  </div>
                </div>
                {!notification.read && (
                  <div className="w-2 h-2 bg-blue-600 rounded-full ml-2 rtl:mr-2 rtl:ml-0"></div>
                )}
              </div>
            ))}
          </div>
        </section>
      </>
    );
  };
  
  // Projects Page Component
  const ProjectsPage = ({ t, projectsData, openModal }) => {
    const [filter, setFilter] = useState('all');
    const [sortBy, setSortBy] = useState('name');
    const [sortOrder, setSortOrder] = useState('asc');
    const [searchTerm, setSearchTerm] = useState('');
    
    // Filter projects
    const filteredProjects = projectsData.filter(project => {
      if (filter !== 'all' && project.status !== filter) return false;
      if (searchTerm && !project.name.toLowerCase().includes(searchTerm.toLowerCase()) && !project.client.toLowerCase().includes(searchTerm.toLowerCase())) return false;
      return true;
    });
    
    // Sort projects
    const sortedProjects = [...filteredProjects].sort((a, b) => {
      let comparison = 0;
      
      if (sortBy === 'name') {
        comparison = a.name.localeCompare(b.name);
      } else if (sortBy === 'client') {
        comparison = a.client.localeCompare(b.client);
      } else if (sortBy === 'deadline') {
        comparison = new Date(a.deadline) - new Date(b.deadline);
      } else if (sortBy === 'progress') {
        comparison = a.progress - b.progress;
      }
      
      return sortOrder === 'asc' ? comparison : -comparison;
    });
    
    // Toggle sort order
    const toggleSortOrder = (field) => {
      if (sortBy === field) {
        setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
      } else {
        setSortBy(field);
        setSortOrder('asc');
      }
    };
    
    return (
      <>
        <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
          <h1 className="text-2xl font-bold mb-4 md:mb-0">{t('projects')}</h1>
          <button 
            onClick={() => openModal('newProject')}
            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center justify-center md:justify-start"
          >
            <Plus className="w-4 h-4 mr-2 rtl:ml-2 rtl:mr-0" />
            {t('newProject')}
          </button>
        </div>
        
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
          {/* Filters and Search */}
          <div className="p-4 border-b border-gray-100 dark:border-gray-700 flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
            <div className="flex flex-wrap items-center gap-2">
              <button 
                onClick={() => setFilter('all')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium ${filter === 'all' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
              >
                {t('viewAll')}
              </button>
              <button 
                onClick={() => setFilter('active')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium ${filter === 'active' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
              >
                {t('active')}
              </button>
              <button 
                onClick={() => setFilter('pending')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium ${filter === 'pending' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
              >
                {t('pending')}
              </button>
              <button 
                onClick={() => setFilter('completed')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium ${filter === 'completed' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
              >
                {t('completed')}
              </button>
              <button 
                onClick={() => setFilter('archived')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium ${filter === 'archived' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
              >
                {t('archived')}
              </button>
            </div>
            
            <div className="relative">
              <input
                type="text"
                placeholder={t('search')}
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full md:w-64 px-4 py-2 rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              <Search className="absolute top-2.5 right-3 rtl:left-3 rtl:right-auto w-4 h-4 text-gray-500 dark:text-gray-400" />
            </div>
          </div>
          
          {/* Projects Table */}
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-gray-50 dark:bg-gray-700 text-left rtl:text-right">
                <tr>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    <button 
                      onClick={() => toggleSortOrder('name')}
                      className="flex items-center"
                    >
                      {t('projectName')}
                      {sortBy === 'name' && (
                        sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                      )}
                    </button>
                  </th>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    <button 
                      onClick={() => toggleSortOrder('client')}
                      className="flex items-center"
                    >
                      {t('projectClient')}
                      {sortBy === 'client' && (
                        sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                      )}
                    </button>
                  </th>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    {t('status')}
                  </th>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    <button 
                      onClick={() => toggleSortOrder('progress')}
                      className="flex items-center"
                    >
                      {t('projectProgress')}
                      {sortBy === 'progress' && (
                        sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                      )}
                    </button>
                  </th>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    <button 
                      onClick={() => toggleSortOrder('deadline')}
                      className="flex items-center"
                    >
                      {t('projectDeadline')}
                      {sortBy === 'deadline' && (
                        sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                      )}
                    </button>
                  </th>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    {t('projectManager')}
                  </th>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    {t('actions')}
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100 dark:divide-gray-700">
                {sortedProjects.map(project => (
                  <tr key={project.id} className="hover:bg-gray-50 dark:hover:bg-gray-750">
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="font-medium">{project.name}</div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      {project.client}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className={`px-2 py-1 text-xs rounded-full ${getStatusColor(project.status)}`}>
                        {t(project.status)}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-1">
                        <div className="bg-blue-600 h-2.5 rounded-full" style={{ width: `${project.progress}%` }}></div>
                      </div>
                      <div className="text-xs text-gray-500 dark:text-gray-400">{project.progress}%</div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      {project.deadline}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      {project.manager}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="flex items-center space-x-3 rtl:space-x-reverse">
                        <button 
                          onClick={() => openModal('viewProject', project)}
                          className="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
                        >
                          <Eye className="w-5 h-5" />
                        </button>
                        <button 
                          onClick={() => openModal('editProject', project)}
                          className="text-gray-500 dark:text-gray-400 hover:text-yellow-600 dark:hover:text-yellow-400"
                        >
                          <Edit className="w-5 h-5" />
                        </button>
                        <button 
                          className="text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400"
                        >
                          <Trash className="w-5 h-5" />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            
            {sortedProjects.length === 0 && (
              <div className="py-8 text-center text-gray-500 dark:text-gray-400">
                {t('noProjectsFound')}
              </div>
            )}
          </div>
        </div>
      </>
    );
  };
  
  // Tasks Page Component
  const TasksPage = ({ t, tasksData, projectsData, teamMembersData, openModal }) => {
    const [filter, setFilter] = useState('all');
    const [sortBy, setSortBy] = useState('dueDate');
    const [sortOrder, setSortOrder] = useState('asc');
    const [searchTerm, setSearchTerm] = useState('');
    
    // Filter tasks
    const filteredTasks = tasksData.filter(task => {
      if (filter !== 'all' && task.status !== filter) return false;
      if (searchTerm && !task.name.toLowerCase().includes(searchTerm.toLowerCase()) && !task.project.toLowerCase().includes(searchTerm.toLowerCase())) return false;
      return true;
    });
    
    // Sort tasks
    const sortedTasks = [...filteredTasks].sort((a, b) => {
      let comparison = 0;
      
      if (sortBy === 'name') {
        comparison = a.name.localeCompare(b.name);
      } else if (sortBy === 'project') {
        comparison = a.project.localeCompare(b.project);
      } else if (sortBy === 'dueDate') {
        comparison = new Date(a.dueDate) - new Date(b.dueDate);
      } else if (sortBy === 'priority') {
        const priorityOrder = { high: 3, medium: 2, low: 1 };
        comparison = priorityOrder[a.priority] - priorityOrder[b.priority];
      }
      
      return sortOrder === 'asc' ? comparison : -comparison;
    });
    
    // Toggle sort order
    const toggleSortOrder = (field) => {
      if (sortBy === field) {
        setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
      } else {
        setSortBy(field);
        setSortOrder('asc');
      }
    };
    
    return (
      <>
        <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
          <h1 className="text-2xl font-bold mb-4 md:mb-0">{t('tasks')}</h1>
          <button 
            onClick={() => openModal('newTask')}
            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center justify-center md:justify-start"
          >
            <Plus className="w-4 h-4 mr-2 rtl:ml-2 rtl:mr-0" />
            {t('newTask')}
          </button>
        </div>
        
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
          {/* Filters and Search */}
          <div className="p-4 border-b border-gray-100 dark:border-gray-700 flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
            <div className="flex flex-wrap items-center gap-2">
              <button 
                onClick={() => setFilter('all')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium ${filter === 'all' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
              >
                {t('allTasks')}
              </button>
              <button 
                onClick={() => setFilter('pending')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium ${filter === 'pending' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
              >
                {t('pending')}
              </button>
              <button 
                onClick={() => setFilter('inProgress')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium ${filter === 'inProgress' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
              >
                {t('inProgress')}
              </button>
              <button 
                onClick={() => setFilter('completed')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium ${filter === 'completed' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
              >
                {t('completed')}
              </button>
            </div>
            
            <div className="relative">
              <input
                type="text"
                placeholder={t('search')}
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full md:w-64 px-4 py-2 rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              <Search className="absolute top-2.5 right-3 rtl:left-3 rtl:right-auto w-4 h-4 text-gray-500 dark:text-gray-400" />
            </div>
          </div>
          
          {/* Tasks Table */}
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-gray-50 dark:bg-gray-700 text-left rtl:text-right">
                <tr>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    <button 
                      onClick={() => toggleSortOrder('name')}
                      className="flex items-center"
                    >
                      {t('taskName')}
                      {sortBy === 'name' && (
                        sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                      )}
                    </button>
                  </th>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    <button 
                      onClick={() => toggleSortOrder('project')}
                      className="flex items-center"
                    >
                      {t('taskProject')}
                      {sortBy === 'project' && (
                        sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                      )}
                    </button>
                  </th>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    <button 
                      onClick={() => toggleSortOrder('priority')}
                      className="flex items-center"
                    >
                      {t('priority')}
                      {sortBy === 'priority' && (
                        sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                      )}
                    </button>
                  </th>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    {t('status')}
                  </th>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    <button 
                      onClick={() => toggleSortOrder('dueDate')}
                      className="flex items-center"
                    >
                      {t('dueDate')}
                      {sortBy === 'dueDate' && (
                        sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                      )}
                    </button>
                  </th>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    {t('assignedTo')}
                  </th>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    {t('actions')}
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100 dark:divide-gray-700">
                {sortedTasks.map(task => (
                  <tr key={task.id} className="hover:bg-gray-50 dark:hover:bg-gray-750">
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="font-medium">{task.name}</div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      {task.project}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className={`px-2 py-1 text-xs rounded-full ${getPriorityColor(task.priority)}`}>
                        {t(task.priority)}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className={`px-2 py-1 text-xs rounded-full ${getStatusColor(task.status)}`}>
                        {t(task.status)}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      {task.dueDate}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="flex items-center">
                        <div className="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs mr-2 rtl:ml-2 rtl:mr-0">
                          {task.assignedTo.charAt(0)}
                        </div>
                        <span>{task.assignedTo}</span>
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="flex items-center space-x-3 rtl:space-x-reverse">
                        <button 
                          onClick={() => openModal('viewTask', task)}
                          className="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
                        >
                          <Eye className="w-5 h-5" />
                        </button>
                        <button 
                          onClick={() => openModal('editTask', task)}
                          className="text-gray-500 dark:text-gray-400 hover:text-yellow-600 dark:hover:text-yellow-400"
                        >
                          <Edit className="w-5 h-5" />
                        </button>
                        <button 
                          className="text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400"
                        >
                          <Trash className="w-5 h-5" />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            
            {sortedTasks.length === 0 && (
              <div className="py-8 text-center text-gray-500 dark:text-gray-400">
                {t('noTasksFound')}
              </div>
            )}
          </div>
        </div>
      </>
    );
  };
  
  // Assets Page Component
  const AssetsPage = ({ t, assetsData, projectsData, openModal }) => {
    const [filter, setFilter] = useState('all');
    const [sortBy, setSortBy] = useState('date');
    const [sortOrder, setSortOrder] = useState('desc');
    const [searchTerm, setSearchTerm] = useState('');
    const [viewMode, setViewMode] = useState('grid'); // 'grid' or 'list'
    
    // Filter assets
    const filteredAssets = assetsData.filter(asset => {
      if (filter !== 'all' && asset.type !== filter) return false;
      if (searchTerm && !asset.name.toLowerCase().includes(searchTerm.toLowerCase()) && !asset.project.toLowerCase().includes(searchTerm.toLowerCase())) return false;
      return true;
    });
    
    // Sort assets
    const sortedAssets = [...filteredAssets].sort((a, b) => {
      let comparison = 0;
      
      if (sortBy === 'name') {
        comparison = a.name.localeCompare(b.name);
      } else if (sortBy === 'project') {
        comparison = a.project.localeCompare(b.project);
      } else if (sortBy === 'date') {
        comparison = new Date(b.date) - new Date(a.date);
      } else if (sortBy === 'size') {
        const sizeA = parseFloat(a.size);
        const sizeB = parseFloat(b.size);
        comparison = sizeA - sizeB;
      }
      
      return sortOrder === 'asc' ? comparison : -comparison;
    });
    
    // Toggle sort order
    const toggleSortOrder = (field) => {
      if (sortBy === field) {
        setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
      } else {
        setSortBy(field);
        setSortOrder('desc');
      }
    };
    
    return (
      <>
        <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
          <h1 className="text-2xl font-bold mb-4 md:mb-0">{t('assets')}</h1>
          <button 
            onClick={() => openModal('uploadFile')}
            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center justify-center md:justify-start"
          >
            <Upload className="w-4 h-4 mr-2 rtl:ml-2 rtl:mr-0" />
            {t('uploadFile')}
          </button>
        </div>
        
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
          {/* Filters and Search */}
          <div className="p-4 border-b border-gray-100 dark:border-gray-700 flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
            <div className="flex flex-wrap items-center gap-2">
              <button 
                onClick={() => setFilter('all')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium ${filter === 'all' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
              >
                {t('allFiles')}
              </button>
              <button 
                onClick={() => setFilter('design')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium ${filter === 'design' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
              >
                {t('designs')}
              </button>
              <button 
                onClick={() => setFilter('document')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium ${filter === 'document' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
              >
                {t('documents')}
              </button>
              <button 
                onClick={() => setFilter('image')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium ${filter === 'image' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
              >
                {t('images')}
              </button>
              
              <div className="ml-2 rtl:mr-2 rtl:ml-0 border-l border-gray-200 dark:border-gray-700 pl-2 rtl:pr-2 rtl:pl-0 flex items-center space-x-2 rtl:space-x-reverse">
                <button 
                  onClick={() => setViewMode('grid')}
                  className={`p-1.5 rounded-md ${viewMode === 'grid' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
                >
                  <Grid className="w-4 h-4" />
                </button>
                <button 
                  onClick={() => setViewMode('list')}
                  className={`p-1.5 rounded-md ${viewMode === 'list' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
                >
                  <List className="w-4 h-4" />
                </button>
              </div>
            </div>
            
            <div className="relative">
              <input
                type="text"
                placeholder={t('search')}
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full md:w-64 px-4 py-2 rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              <Search className="absolute top-2.5 right-3 rtl:left-3 rtl:right-auto w-4 h-4 text-gray-500 dark:text-gray-400" />
            </div>
          </div>
          
          {/* Assets Grid/List View */}
          <div className="p-4">
            {viewMode === 'grid' ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {sortedAssets.map(asset => (
                  <div 
                    key={asset.id} 
                    className="border border-gray-100 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-md transition-shadow"
                  >
                    <div className="p-4 bg-gray-50 dark:bg-gray-750 flex items-center justify-center h-32">
                      {getFileTypeIcon(asset.type)}
                    </div>
                    <div className="p-4">
                      <h3 className="font-medium text-sm mb-1 truncate" title={asset.name}>{asset.name}</h3>
                      <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">{asset.project}</p>
                      <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                        <span>{asset.date}</span>
                        <span>{asset.size}</span>
                      </div>
                      <div className="mt-3 flex items-center justify-between">
                        <button 
                          onClick={() => openModal('viewFile', asset)}
                          className="text-blue-600 dark:text-blue-400 hover:underline text-sm"
                        >
                          {t('view')}
                        </button>
                        <button 
                          className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
                        >
                          <Download className="w-4 h-4" />
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <table className="w-full">
                <thead className="bg-gray-50 dark:bg-gray-700 text-left rtl:text-right">
                  <tr>
                    <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      <button 
                        onClick={() => toggleSortOrder('name')}
                        className="flex items-center"
                      >
                        {t('fileName')}
                        {sortBy === 'name' && (
                          sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                        )}
                      </button>
                    </th>
                    <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      <button 
                        onClick={() => toggleSortOrder('project')}
                        className="flex items-center"
                      >
                        {t('project')}
                        {sortBy === 'project' && (
                          sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                        )}
                      </button>
                    </th>
                    <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      {t('type')}
                    </th>
                    <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      <button 
                        onClick={() => toggleSortOrder('size')}
                        className="flex items-center"
                      >
                        {t('size')}
                        {sortBy === 'size' && (
                          sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                        )}
                      </button>
                    </th>
                    <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      <button 
                        onClick={() => toggleSortOrder('date')}
                        className="flex items-center"
                      >
                        {t('date')}
                        {sortBy === 'date' && (
                          sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                        )}
                      </button>
                    </th>
                    <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      {t('actions')}
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-100 dark:divide-gray-700">
                  {sortedAssets.map(asset => (
                    <tr key={asset.id} className="hover:bg-gray-50 dark:hover:bg-gray-750">
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="flex items-center">
                          <div className="mr-3 rtl:ml-3 rtl:mr-0">
                            {getFileTypeIcon(asset.type)}
                          </div>
                          <div className="font-medium">{asset.name}</div>
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        {asset.project}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span className="capitalize">{asset.type}</span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        {asset.size}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        {asset.date}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="flex items-center space-x-3 rtl:space-x-reverse">
                          <button 
                            onClick={() => openModal('viewFile', asset)}
                            className="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
                          >
                            <Eye className="w-5 h-5" />
                          </button>
                          <button 
                            className="text-gray-500 dark:text-gray-400 hover:text-green-600 dark:hover:text-green-400"
                          >
                            <Download className="w-5 h-5" />
                          </button>
                          <button 
                            className="text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400"
                          >
                            <Trash className="w-5 h-5" />
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
            
            {sortedAssets.length === 0 && (
              <div className="py-8 text-center text-gray-500 dark:text-gray-400">
                {t('noFilesFound')}
              </div>
            )}
          </div>
        </div>
      </>
    );
  };
  
  // Content Plan Page Component
  const ContentPlanPage = ({ t, contentCalendarData, projectsData, openModal }) => {
    const [filter, setFilter] = useState('all');
    const [sortBy, setSortBy] = useState('date');
    const [sortOrder, setSortOrder] = useState('asc');
    const [searchTerm, setSearchTerm] = useState('');
    const [viewMode, setViewMode] = useState('calendar'); // 'calendar' or 'list'
    const [currentMonth, setCurrentMonth] = useState(new Date());
    
    // Filter content
    const filteredContent = contentCalendarData.filter(content => {
      if (filter !== 'all' && content.platform !== filter) return false;
      if (searchTerm && !content.title.toLowerCase().includes(searchTerm.toLowerCase()) && !content.project.toLowerCase().includes(searchTerm.toLowerCase())) return false;
      return true;
    });
    
    // Sort content
    const sortedContent = [...filteredContent].sort((a, b) => {
      let comparison = 0;
      
      if (sortBy === 'title') {
        comparison = a.title.localeCompare(b.title);
      } else if (sortBy === 'project') {
        comparison = a.project.localeCompare(b.project);
      } else if (sortBy === 'date') {
        comparison = new Date(a.date) - new Date(b.date);
      } else if (sortBy === 'platform') {
        comparison = a.platform.localeCompare(b.platform);
      }
      
      return sortOrder === 'asc' ? comparison : -comparison;
    });
    
    // Toggle sort order
    const toggleSortOrder = (field) => {
      if (sortBy === field) {
        setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
      } else {
        setSortBy(field);
        setSortOrder('asc');
      }
    };
    
    // Get days in month
    const getDaysInMonth = (year, month) => {
      return new Date(year, month + 1, 0).getDate();
    };
    
    // Get first day of month
    const getFirstDayOfMonth = (year, month) => {
      return new Date(year, month, 1).getDay();
    };
    
    // Generate calendar days
    const generateCalendarDays = () => {
      const year = currentMonth.getFullYear();
      const month = currentMonth.getMonth();
      const daysInMonth = getDaysInMonth(year, month);
      const firstDayOfMonth = getFirstDayOfMonth(year, month);
      
      const days = [];
      
      // Add empty cells for days before the first day of the month
      for (let i = 0; i < firstDayOfMonth; i++) {
        days.push({ day: null, isCurrentMonth: false });
      }
      
      // Add days of the current month
      for (let i = 1; i <= daysInMonth; i++) {
        days.push({ day: i, isCurrentMonth: true });
      }
      
      return days;
    };
    
    // Get content for a specific day
    const getContentForDay = (day) => {
      if (!day) return [];
      
      const year = currentMonth.getFullYear();
      const month = currentMonth.getMonth();
      const dateString = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
      
      return filteredContent.filter(content => content.date === dateString);
    };
    
    // Navigate to previous month
    const goToPreviousMonth = () => {
      setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1));
    };
    
    // Navigate to next month
    const goToNextMonth = () => {
      setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1));
    };
    
    // Get month name
    const getMonthName = () => {
      const monthNames = [
        t('january'), t('february'), t('march'), t('april'), t('may'), t('june'),
        t('july'), t('august'), t('september'), t('october'), t('november'), t('december')
      ];
      return `${monthNames[currentMonth.getMonth()]} ${currentMonth.getFullYear()}`;
    };
    
    return (
      <>
        <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
          <h1 className="text-2xl font-bold mb-4 md:mb-0">{t('contentPlan')}</h1>
          <button 
            onClick={() => openModal('newContent')}
            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center justify-center md:justify-start"
          >
            <Plus className="w-4 h-4 mr-2 rtl:ml-2 rtl:mr-0" />
            {t('newContent')}
          </button>
        </div>
        
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
          {/* Filters and Search */}
          <div className="p-4 border-b border-gray-100 dark:border-gray-700 flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
            <div className="flex flex-wrap items-center gap-2">
              <button 
                onClick={() => setFilter('all')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium ${filter === 'all' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
              >
                {t('all')}
              </button>
              <button 
                onClick={() => setFilter('instagram')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium ${filter === 'instagram' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
              >
                {t('instagram')}
              </button>
              <button 
                onClick={() => setFilter('twitter')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium ${filter === 'twitter' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
              >
                {t('twitter')}
              </button>
              <button 
                onClick={() => setFilter('tiktok')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium ${filter === 'tiktok' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
              >
                {t('tiktok')}
              </button>
              
              <div className="ml-2 rtl:mr-2 rtl:ml-0 border-l border-gray-200 dark:border-gray-700 pl-2 rtl:pr-2 rtl:pl-0 flex items-center space-x-2 rtl:space-x-reverse">
                <button 
                  onClick={() => setViewMode('calendar')}
                  className={`p-1.5 rounded-md ${viewMode === 'calendar' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
                >
                  <Calendar className="w-4 h-4" />
                </button>
                <button 
                  onClick={() => setViewMode('list')}
                  className={`p-1.5 rounded-md ${viewMode === 'list' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
                >
                  <List className="w-4 h-4" />
                </button>
              </div>
            </div>
            
            <div className="relative">
              <input
                type="text"
                placeholder={t('search')}
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full md:w-64 px-4 py-2 rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              <Search className="absolute top-2.5 right-3 rtl:left-3 rtl:right-auto w-4 h-4 text-gray-500 dark:text-gray-400" />
            </div>
          </div>
          
          {/* Content Calendar/List View */}
          <div className="p-4">
            {viewMode === 'calendar' ? (
              <div>
                {/* Calendar Header */}
                <div className="flex items-center justify-between mb-4">
                  <button 
                    onClick={goToPreviousMonth}
                    className="p-2 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600"
                  >
                    <ChevronLeft className="w-5 h-5" />
                  </button>
                  <h2 className="text-lg font-semibold">{getMonthName()}</h2>
                  <button 
                    onClick={goToNextMonth}
                    className="p-2 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600"
                  >
                    <ChevronRight className="w-5 h-5" />
                  </button>
                </div>
                
                {/* Calendar Grid */}
                <div className="grid grid-cols-7 gap-2">
                  {/* Day Names */}
                  {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day, index) => (
                    <div key={index} className="text-center text-sm font-medium text-gray-500 dark:text-gray-400 py-2">
                      {day}
                    </div>
                  ))}
                  
                  {/* Calendar Days */}
                  {generateCalendarDays().map((day, index) => (
                    <div 
                      key={index} 
                      className={`min-h-[100px] border rounded-md p-2 ${day.isCurrentMonth ? 'border-gray-200 dark:border-gray-700' : 'border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-850'}`}
                    >
                      {day.day && (
                        <>
                          <div className="text-right text-sm font-medium mb-2">
                            {day.day}
                          </div>
                          <div className="space-y-1">
                            {getContentForDay(day.day).map(content => (
                              <div 
                                key={content.id} 
                                className="text-xs p-1 rounded bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 truncate cursor-pointer"
                                onClick={() => openModal('viewContent', content)}
                              >
                                <div className="flex items-center">
                                  {getPlatformIcon(content.platform)}
                                  <span className="ml-1 rtl:mr-1 rtl:ml-0">{content.title}</span>
                                </div>
                              </div>
                            ))}
                          </div>
                        </>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            ) : (
              <table className="w-full">
                <thead className="bg-gray-50 dark:bg-gray-700 text-left rtl:text-right">
                  <tr>
                    <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      <button 
                        onClick={() => toggleSortOrder('title')}
                        className="flex items-center"
                      >
                        {t('contentTitle')}
                        {sortBy === 'title' && (
                          sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                        )}
                      </button>
                    </th>
                    <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      <button 
                        onClick={() => toggleSortOrder('platform')}
                        className="flex items-center"
                      >
                        {t('platform')}
                        {sortBy === 'platform' && (
                          sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                        )}
                      </button>
                    </th>
                    <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      <button 
                        onClick={() => toggleSortOrder('project')}
                        className="flex items-center"
                      >
                        {t('project')}
                        {sortBy === 'project' && (
                          sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                        )}
                      </button>
                    </th>
                    <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      {t('status')}
                    </th>
                    <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      <button 
                        onClick={() => toggleSortOrder('date')}
                        className="flex items-center"
                      >
                        {t('date')}
                        {sortBy === 'date' && (
                          sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                        )}
                      </button>
                    </th>
                    <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      {t('actions')}
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-100 dark:divide-gray-700">
                  {sortedContent.map(content => (
                    <tr key={content.id} className="hover:bg-gray-50 dark:hover:bg-gray-750">
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="font-medium">{content.title}</div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="flex items-center">
                          <div className="mr-2 rtl:ml-2 rtl:mr-0">
                            {getPlatformIcon(content.platform)}
                          </div>
                          <span>{t(content.platform)}</span>
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        {content.project}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span className={`px-2 py-1 text-xs rounded-full ${getStatusColor(content.status)}`}>
                          {t(content.status)}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        {content.date}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="flex items-center space-x-3 rtl:space-x-reverse">
                          <button 
                            onClick={() => openModal('viewContent', content)}
                            className="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
                          >
                            <Eye className="w-5 h-5" />
                          </button>
                          <button 
                            onClick={() => openModal('editContent', content)}
                            className="text-gray-500 dark:text-gray-400 hover:text-yellow-600 dark:hover:text-yellow-400"
                          >
                            <Edit className="w-5 h-5" />
                          </button>
                          <button 
                            className="text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400"
                          >
                            <Trash className="w-5 h-5" />
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
            
            {filteredContent.length === 0 && viewMode === 'list' && (
              <div className="py-8 text-center text-gray-500 dark:text-gray-400">
                {t('noContentFound')}
              </div>
            )}
          </div>
        </div>
      </>
    );
  };
  
  // Clients Page Component
  const ClientsPage = ({ t, clientsData, projectsData, openModal }) => {
    const [sortBy, setSortBy] = useState('name');
    const [sortOrder, setSortOrder] = useState('asc');
    const [searchTerm, setSearchTerm] = useState('');
    
    // Filter clients
    const filteredClients = clientsData.filter(client => {
      if (searchTerm && !client.name.toLowerCase().includes(searchTerm.toLowerCase()) && !client.contact.toLowerCase().includes(searchTerm.toLowerCase())) return false;
      return true;
    });
    
    // Sort clients
    const sortedClients = [...filteredClients].sort((a, b) => {
      let comparison = 0;
      
      if (sortBy === 'name') {
        comparison = a.name.localeCompare(b.name);
      } else if (sortBy === 'contact') {
        comparison = a.contact.localeCompare(b.contact);
      } else if (sortBy === 'email') {
        comparison = a.email.localeCompare(b.email);
      } else if (sortBy === 'projects') {
        comparison = a.projects - b.projects;
      }
      
      return sortOrder === 'asc' ? comparison : -comparison;
    });
    
    // Toggle sort order
    const toggleSortOrder = (field) => {
      if (sortBy === field) {
        setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
      } else {
        setSortBy(field);
        setSortOrder('asc');
      }
    };
    
    return (
      <>
        <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
          <h1 className="text-2xl font-bold mb-4 md:mb-0">{t('clients')}</h1>
          <button 
            onClick={() => openModal('newClient')}
            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center justify-center md:justify-start"
          >
            <Plus className="w-4 h-4 mr-2 rtl:ml-2 rtl:mr-0" />
            {t('newClient')}
          </button>
        </div>
        
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
          {/* Search */}
          <div className="p-4 border-b border-gray-100 dark:border-gray-700 flex justify-end">
            <div className="relative">
              <input
                type="text"
                placeholder={t('search')}
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full md:w-64 px-4 py-2 rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              <Search className="absolute top-2.5 right-3 rtl:left-3 rtl:right-auto w-4 h-4 text-gray-500 dark:text-gray-400" />
            </div>
          </div>
          
          {/* Clients Table */}
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-gray-50 dark:bg-gray-700 text-left rtl:text-right">
                <tr>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    <button 
                      onClick={() => toggleSortOrder('name')}
                      className="flex items-center"
                    >
                      {t('clientName')}
                      {sortBy === 'name' && (
                        sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                      )}
                    </button>
                  </th>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    <button 
                      onClick={() => toggleSortOrder('contact')}
                      className="flex items-center"
                    >
                      {t('contact')}
                      {sortBy === 'contact' && (
                        sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                      )}
                    </button>
                  </th>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    <button 
                      onClick={() => toggleSortOrder('email')}
                      className="flex items-center"
                    >
                      {t('email')}
                      {sortBy === 'email' && (
                        sortOrder === 'asc' ? <ChevronDown className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" /> : <ChevronUp className="w-4 h-4 ml-1 rtl:mr-1 rtl:ml-0" />
                      )}
                    </button>
                  </th>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    {t('phone')}
                  </th>
                  <th className="px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    <button 
                      onClick={() => toggleSortOrder('projects')}
                      className="flex items-center"
                    >
                      {t('projects')}
                      {sortBy === 'projects' && (
                        sortOrder === 'asc' ? <ChevronDown className="w-4<ant_artifact identifier="MontagecoDashboard" title="Montageco React Dashboard, bilingual, with analytics and sidebar">
import React, { useState } from 'react';
import { 
  Calendar, 
  CheckCircle, 
  Clock, 
  FileText, 
  Grid, 
  Home, 
  LayoutDashboard, 
  List, 
  MessageSquare, 
  PieChart, 
  Plus, 
  Settings, 
  Users, 
  Bell, 
  ChevronRight, 
  ChevronLeft,
  Instagram,
  Twitter,
  Search,
  Menu,
  X
} from 'lucide-react';

const MontagecoDashboard = () => {
  const [language, setLanguage] = useState('ar'); // 'ar' for Arabic, 'en' for English
  const [menuOpen, setMenuOpen] = useState(false);
  
  // Translations
  const translations = {
    en: {
      dashboard: "Dashboard",
      projects: "Projects",
      tasks: "Tasks",
      assets: "Assets",
      contentPlan: "Content Plan",
      clients: "Clients",
      team: "Team",
      reports: "Reports",
      settings: "Settings",
      messages: "Messages",
      search: "Search...",
      welcome: "Welcome back",
      projectsOverview: "Projects Overview",
      activeProjects: "Active Projects",
      completedProjects: "Completed Projects",
      pendingProjects: "Pending Projects",
      archivedProjects: "Archived Projects",
      upcomingTasks: "Upcoming Tasks",
      contentCalendar: "Content Calendar",
      recentFiles: "Recent Files",
      teamPerformance: "Team Performance",
      notifications: "Notifications",
      viewAll: "View All",
      today: "Today",
      thisWeek: "This Week",
      highPriority: "High Priority",
      mediumPriority: "Medium Priority",
      lowPriority: "Low Priority",
      instagram: "Instagram",
      twitter: "Twitter",
      tiktok: "TikTok",
      googleMaps: "Google Maps",
      designTask: "Design Task",
      editTask: "Edit Task",
      designReview: "Design Review",
      clientFeedback: "Client Feedback",
      finalApproval: "Final Approval",
      projectName: "Project Name",
      dueDate: "Due Date",
      assignedTo: "Assigned To",
      status: "Status",
      priority: "Priority",
      pending: "Pending",
      inProgress: "In Progress",
      completed: "Completed",
      cancelled: "Cancelled",
      high: "High",
      medium: "Medium",
      low: "Low",
      january: "January",
      february: "February",
      march: "March",
      april: "April",
      may: "May",
      june: "June",
      july: "July",
      august: "August",
      september: "September",
      october: "October",
      november: "November",
      december: "December",
      // Additional analytics
      analytics: "Analytics",
      totalRevenue: "Total Revenue",
      revenueGrowth: "Revenue Growth",
      newClients: "New Clients",
      retention: "Retention",
      thisMonth: "This Month",
      prevMonth: "Prev. Month"
    },
    ar: {
      dashboard: "لوحة التحكم",
      projects: "المشاريع",
      tasks: "المهام",
      assets: "الأصول",
      contentPlan: "خطة المحتوى",
      clients: "العملاء",
      team: "الفريق",
      reports: "التقارير",
      settings: "الإعدادات",
      messages: "الرسائل",
      search: "بحث...",
      welcome: "مرحباً بعودتك",
      projectsOverview: "نظرة عامة على المشاريع",
      activeProjects: "المشاريع النشطة",
      completedProjects: "المشاريع المكتملة",
      pendingProjects: "المشاريع قيد الانتظار",
      archivedProjects: "المشاريع المؤرشفة",
      upcomingTasks: "المهام القادمة",
      contentCalendar: "تقويم المحتوى",
      recentFiles: "الملفات الحديثة",
      teamPerformance: "أداء الفريق",
      notifications: "الإشعارات",
      viewAll: "عرض الكل",
      today: "اليوم",
      thisWeek: "هذا الأسبوع",
      highPriority: "أولوية عالية",
      mediumPriority: "أولوية متوسطة",
      lowPriority: "أولوية منخفضة",
      instagram: "انستغرام",
      twitter: "تويتر",
      tiktok: "تيك توك",
      googleMaps: "خرائط جوجل",
      designTask: "مهمة تصميم",
      editTask: "مهمة تعديل",
      designReview: "مراجعة تصميم",
      clientFeedback: "ملاحظات العميل",
      finalApproval: "الموافقة النهائية",
      projectName: "اسم المشروع",
      dueDate: "تاريخ الاستحقاق",
      assignedTo: "مُسند إلى",
      status: "الحالة",
      priority: "الأولوية",
      pending: "قيد الانتظار",
      inProgress: "قيد التنفيذ",
      completed: "مكتمل",
      cancelled: "ملغي",
      high: "عالية",
      medium: "متوسطة",
      low: "منخفضة",
      january: "يناير",
      february: "فبراير",
      march: "مارس",
      april: "أبريل",
      may: "مايو",
      june: "يونيو",
      july: "يوليو",
      august: "أغسطس",
      september: "سبتمبر",
      october: "أكتوبر",
      november: "نوفمبر",
      december: "ديسمبر",
      // Additional analytics
      analytics: "التحاليل",
      totalRevenue: "إجمالي الإيرادات",
      revenueGrowth: "نمو الإيرادات",
      newClients: "عملاء جدد",
      retention: "الاحتفاظ",
      thisMonth: "هذا الشهر",
      prevMonth: "الشهر الماضي"
    }
  };
  
  // Helper function to get text based on current language
  const t = (key) => translations[language][key] || key;
  
  // Mock data for projects
  const projectsData = {
    active: 12,
    completed: 24,
    pending: 5,
    archived: 18
  };

  // Mock data for analytics (added)
  const analyticsData = [
    {
      id: 1,
      label: 'totalRevenue',
      value: "SAR 84,200",
      growth: "+8.1%",
      positive: true
    },
    {
      id: 2,
      label: 'revenueGrowth',
      value: "+18.5%",
      growth: "+1.2%",
      positive: true
    },
    {
      id: 3,
      label: 'newClients',
      value: "56",
      growth: "-2",
      positive: false
    },
    {
      id: 4,
      label: 'retention',
      value: "91%",
      growth: "+3%",
      positive: true
    },
  ];
  
  // Mock data for tasks
  const tasksData = [
    { id: 1, name: t('designTask'), project: 'Brand X', dueDate: '2023-12-15', assignedTo: 'محمد أحمد', priority: 'high', status: 'inProgress' },
    { id: 2, name: t('editTask'), project: 'Tech Co', dueDate: '2023-12-16', assignedTo: 'سارة خالد', priority: 'medium', status: 'pending' },
    { id: 3, name: t('designReview'), project: 'Fashion Z', dueDate: '2023-12-14', assignedTo: 'أحمد علي', priority: 'high', status: 'pending' },
    { id: 4, name: t('clientFeedback'), project: 'Cafe Y', dueDate: '2023-12-13', assignedTo: 'ليلى محمد', priority: 'low', status: 'completed' },
  ];
  
  // Mock data for content calendar
  const contentCalendarData = [
    { id: 1, platform: 'instagram', date: '2023-12-15', project: 'Brand X', status: 'scheduled' },
    { id: 2, platform: 'twitter', date: '2023-12-16', project: 'Tech Co', status: 'published' },
    { id: 3, platform: 'tiktok', date: '2023-12-17', project: 'Fashion Z', status: 'scheduled' },
    { id: 4, platform: 'instagram', date: '2023-12-18', project: 'Cafe Y', status: 'scheduled' },
  ];
  
  // Mock data for recent files
  const recentFilesData = [
    { id: 1, name: 'Brand X Logo Final.ai', type: 'design', date: '2023-12-12', size: '2.4 MB' },
    { id: 2, name: 'Tech Co Social Media Kit.psd', type: 'design', date: '2023-12-11', size: '15.7 MB' },
    { id: 3, name: 'Fashion Z Contract.pdf', type: 'document', date: '2023-12-10', size: '1.2 MB' },
    { id: 4, name: 'Cafe Y Menu Design.ai', type: 'design', date: '2023-12-09', size: '4.5 MB' },
  ];
  
  // Mock data for team performance
  const teamPerformanceData = [
    { id: 1, name: 'محمد أحمد', tasksCompleted: 24, onTime: '95%' },
    { id: 2, name: 'سارة خالد', tasksCompleted: 18, onTime: '92%' },
    { id: 3, name: 'أحمد علي', tasksCompleted: 15, onTime: '88%' },
    { id: 4, name: 'ليلى محمد', tasksCompleted: 21, onTime: '94%' },
  ];
  
  // Mock data for notifications
  const notificationsData = [
    { id: 1, type: 'task', message: 'تم تعيين مهمة جديدة لك', time: '10:30 AM' },
    { id: 2, type: 'comment', message: 'أضاف العميل تعليقًا جديدًا على التصميم', time: '09:15 AM' },
    { id: 3, type: 'deadline', message: 'موعد تسليم مشروع "Brand X" غدًا', time: 'Yesterday' },
    { id: 4, type: 'approval', message: 'تمت الموافقة على التصميم من قبل العميل', time: 'Yesterday' },
  ];
  
  // Get priority color
  const getPriorityColor = (priority) => {
    switch(priority) {
      case 'high': return 'bg-red-100 text-red-800';
      case 'medium': return 'bg-yellow-100 text-yellow-800';
      case 'low': return 'bg-green-100 text-green-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };
  
  // Get status color
  const getStatusColor = (status) => {
    switch(status) {
      case 'completed': return 'bg-green-100 text-green-800';
      case 'inProgress': return 'bg-blue-100 text-blue-800';
      case 'pending': return 'bg-yellow-100 text-yellow-800';
      case 'cancelled': return 'bg-red-100 text-red-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };
  
  // Get platform icon
  const getPlatformIcon = (platform) => {
    switch(platform) {
      case 'instagram': return <Instagram className="w-4 h-4" />;
      case 'twitter': return <Twitter className="w-4 h-4" />;
      case 'tiktok': return <span className="text-xs font-bold">TT</span>;
      default: return null;
    }
  };
  
  // Toggle language
  const toggleLanguage = () => {
    setLanguage(language === 'ar' ? 'en' : 'ar');
  };
  
  // Toggle mobile menu
  const toggleMenu = () => {
    setMenuOpen(!menuOpen);
  };
  
  return (
    <div dir={language === 'ar' ? 'rtl' : 'ltr'} className="font-['Inter',sans-serif] bg-gray-50 min-h-screen text-gray-900">
      {/* Header */}
      <header className="bg-white shadow-sm fixed top-0 left-0 right-0 z-10">
        <div className="flex items-center justify-between px-4 py-3">
          <div className="flex items-center">
            <button 
              onClick={toggleMenu} 
              className="md:hidden p-2 rounded-md text-gray-500 hover:text-gray-600 hover:bg-gray-100"
            >
              {menuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
            <div className="flex items-center">
              <span className="font-bold text-xl text-blue-600 ml-2 mr-2">Montageco</span>
            </div>
          </div>
          
          <div className="flex items-center space-x-4 rtl:space-x-reverse">
            <div className="relative hidden md:block">
              <input
                type="text"
                placeholder={t('search')}
                className="bg-gray-100 rounded-full py-2 px-4 pr-10 rtl:pl-10 rtl:pr-4 w-64 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white"
              />
              <Search className="absolute top-2.5 right-3 rtl:left-3 rtl:right-auto w-4 h-4 text-gray-500" />
            </div>
            
            <button className="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 relative">
              <Bell className="w-5 h-5" />
              <span className="absolute top-1 right-1 rtl:left-1 rtl:right-auto w-2 h-2 bg-red-500 rounded-full"></span>
            </button>
            
            <button 
              onClick={toggleLanguage} 
              className="px-3 py-1.5 rounded-md bg-gray-100 text-sm font-medium hover:bg-gray-200"
            >
              {language === 'ar' ? 'EN' : 'عربي'}
            </button>
            
            <div className="flex items-center">
              <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">
                MA
              </div>
            </div>
          </div>
        </div>
      </header>
      
      {/* Sidebar */}
      <aside className={`fixed inset-y-0 ${language === 'ar' ? 'right-0' : 'left-0'} w-64 bg-white shadow-md transform ${menuOpen ? 'translate-x-0' : language === 'ar' ? 'translate-x-full' : '-translate-x-full'} md:translate-x-0 transition-transform duration-300 ease-in-out z-20 pt-16`}>
        <nav className="mt-6 px-4">
          <ul className="space-y-1">
            <li>
              <a href="#" className="flex items-center px-4 py-3 text-blue-600 bg-blue-50 rounded-md font-medium">
                <LayoutDashboard className="w-5 h-5 mr-3 rtl:ml-3 rtl:mr-0" />
                <span>{t('dashboard')}</span>
              </a>
            </li>
            <li>
              <a href="#" className="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md">
                <Grid className="w-5 h-5 mr-3 rtl:ml-3 rtl:mr-0" />
                <span>{t('projects')}</span>
              </a>
            </li>
            <li>
              <a href="#" className="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md">
                <List className="w-5 h-5 mr-3 rtl:ml-3 rtl:mr-0" />
                <span>{t('tasks')}</span>
              </a>
            </li>
            <li>
              <a href="#" className="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md">
                <FileText className="w-5 h-5 mr-3 rtl:ml-3 rtl:mr-0" />
                <span>{t('assets')}</span>
              </a>
            </li>
            <li>
              <a href="#" className="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md">
                <Calendar className="w-5 h-5 mr-3 rtl:ml-3 rtl:mr-0" />
                <span>{t('contentPlan')}</span>
              </a>
            </li>
            <li>
              <a href="#" className="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md">
                <Users className="w-5 h-5 mr-3 rtl:ml-3 rtl:mr-0" />
                <span>{t('clients')}</span>
              </a>
            </li>
            <li>
              <a href="#" className="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md">
                <Users className="w-5 h-5 mr-3 rtl:ml-3 rtl:mr-0" />
                <span>{t('team')}</span>
              </a>
            </li>
            <li>
              <a href="#" className="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md">
                <PieChart className="w-5 h-5 mr-3 rtl:ml-3 rtl:mr-0" />
                <span>{t('reports')}</span>
              </a>
            </li>
            {/* Insert Analytics to Sidebar */}
            <li>
              <a href="#" className="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md">
                <PieChart className="w-5 h-5 mr-3 rtl:ml-3 rtl:mr-0" />
                <span>{t('analytics')}</span>
              </a>
            </li>
            <li>
              <a href="#" className="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md">
                <MessageSquare className="w-5 h-5 mr-3 rtl:ml-3 rtl:mr-0" />
                <span>{t('messages')}</span>
              </a>
            </li>
            <li>
              <a href="#" className="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md">
                <Settings className="w-5 h-5 mr-3 rtl:ml-3 rtl:mr-0" />
                <span>{t('settings')}</span>
              </a>
            </li>
          </ul>
        </nav>
      </aside>
      
      {/* Main Content */}
      <main className={`pt-20 pb-8 md:${language === 'ar' ? 'pr-64' : 'pl-64'} transition-all duration-300`}>
        <div className="px-4 md:px-8">
          {/* Welcome Section */}
          <div className="mb-8">
            <h1 className="text-2xl font-bold">{t('welcome')}</h1>
            <p className="text-gray-600 mt-1">2023 {t('december')}, 14</p>
          </div>

          {/* Analytics Section Start */}
          <section className="mb-8">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-xl font-semibold">{t('analytics')}</h2>
              <span className="text-gray-400 text-sm">{t('thisMonth')}</span>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
              {analyticsData.map(item => (
                <div key={item.id} className="bg-white rounded-lg shadow-sm p-6 border border-gray-100">
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="text-gray-500 text-sm font-medium">{t(item.label)}</h3>
                  </div>
                  <p className="text-2xl font-bold mb-2">{item.value}</p>
                  <p className={`text-sm flex items-center font-medium ${item.positive ? 'text-green-600' : 'text-red-600'}`}>
                    {item.positive
                      ? <ChevronRight className={`w-4 h-4 inline ${language === 'ar' ? 'rotate-180' : ''}`} />
                      : <ChevronLeft className={`w-4 h-4 inline ${language === 'ar' ? 'rotate-180' : ''}`} />
                    }
                    <span className="mx-1">{item.growth}</span>
                    <span className="text-gray-400">{t('prevMonth')}</span>
                  </p>
                </div>
              ))}
            </div>
          </section>
          {/* Analytics Section End */}
          
          {/* Projects Overview */}
          <section className="mb-8">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-xl font-semibold">{t('projectsOverview')}</h2>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
              <div className="bg-white rounded-lg shadow-sm p-6 border border-gray-100">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-gray-500 text-sm font-medium">{t('activeProjects')}</h3>
                  <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
                    <Grid className="w-5 h-5 text-blue-600" />
                  </div>
                </div>
                <p className="text-3xl font-bold">{projectsData.active}</p>
                <p className="text-green-600 text-sm mt-2 flex items-center">
                  <span className="flex items-center">
                    <ChevronRight className={`w-4 h-4 ${language === 'ar' ? 'rotate-180' : ''}`} />
                    +2 {t('thisWeek')}
                  </span>
                </p>
              </div>
              
              <div className="bg-white rounded-lg shadow-sm p-6 border border-gray-100">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-gray-500 text-sm font-medium">{t('completedProjects')}</h3>
                  <div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
                    <CheckCircle className="w-5 h-5 text-green-600" />
                  </div>
                </div>
                <p className="text-3xl font-bold">{projectsData.completed}</p>
                <p className="text-green-600 text-sm mt-2 flex items-center">
                  <span className="flex items-center">
                    <ChevronRight className={`w-4 h-4 ${language === 'ar' ? 'rotate-180' : ''}`} />
                    +5 {t('thisWeek')}
                  </span>
                </p>
              </div>
              
              <div className="bg-white rounded-lg shadow-sm p-6 border border-gray-100">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-gray-500 text-sm font-medium">{t('pendingProjects')}</h3>
                  <div className="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center">
                    <Clock className="w-5 h-5 text-yellow-600" />
                  </div>
                </div>
                <p className="text-3xl font-bold">{projectsData.pending}</p>
                <p className="text-red-600 text-sm mt-2 flex items-center">
                  <span className="flex items-center">
                    <ChevronRight className={`w-4 h-4 ${language === 'ar' ? 'rotate-180' : ''}`} />
                    -1 {t('thisWeek')}
                  </span>
                </p>
              </div>
              
              <div className="bg-white rounded-lg shadow-sm p-6 border border-gray-100">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-gray-500 text-sm font-medium">{t('archivedProjects')}</h3>
                  <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
                    <FileText className="w-5 h-5 text-gray-600" />
                  </div>
                </div>
                <p className="text-3xl font-bold">{projectsData.archived}</p>
                <p className="text-gray-600 text-sm mt-2 flex items-center">
                  <span className="flex items-center">
                    <ChevronRight className={`w-4 h-4 ${language === 'ar' ? 'rotate-180' : ''}`} />
                    +0 {t('thisWeek')}
                  </span>
                </p>
              </div>
            </div>
          </section>
          
          {/* Tasks and Content Calendar */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            {/* Upcoming Tasks */}
            <section className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-lg font-semibold">{t('upcomingTasks')}</h2>
                <a href="#" className="text-blue-600 text-sm font-medium hover:underline">{t('viewAll')}</a>
              </div>
              
              <div className="space-y-4">
                {tasksData.map(task => (
                  <div key={task.id} className="border-b border-gray-100 pb-4 last:border-0 last:pb-0">
                    <div className="flex items-center justify-between mb-2">
                      <h3 className="font-medium">{task.name}</h3>
                      <span className={`text-xs px-2 py-1 rounded-full ${getPriorityColor(task.priority)}`}>
                        {t(task.priority)}
                      </span>
                    </div>
                    <div className="flex items-center text-sm text-gray-500 mb-2">
                      <span className="mr-3 rtl:ml-3 rtl:mr-0">{task.project}</span>
                      <span>{task.dueDate}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center">
                        <div className="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs">
                          {task.assignedTo.charAt(0)}
                        </div>
                        <span className="text-sm text-gray-600 ml-2 rtl:mr-2 rtl:ml-0">{task.assignedTo}</span>
                      </div>
                      <span className={`text-xs px-2 py-1 rounded-full ${getStatusColor(task.status)}`}>
                        {t(task.status)}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
              
              <button className="mt-6 w-full py-2 border border-blue-600 text-blue-600 rounded-md hover:bg-blue-50 font-medium flex items-center justify-center">
                <Plus className="w-4 h-4 mr-2 rtl:ml-2 rtl:mr-0" />
                {t('tasks')}
              </button>
            </section>
            
            {/* Content Calendar */}
            <section className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-lg font-semibold">{t('contentCalendar')}</h2>
                <a href="#" className="text-blue-600 text-sm font-medium hover:underline">{t('viewAll')}</a>
              </div>
              
              <div className="space-y-4">
                {contentCalendarData.map(content => (
                  <div key={content.id} className="flex items-center p-3 border border-gray-100 rounded-lg">
                    <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3 rtl:ml-3 rtl:mr-0">
                      {getPlatformIcon(content.platform)}
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center justify-between mb-1">
                        <h3 className="font-medium">{t(content.platform)}</h3>
                        <span className="text-sm text-gray-500">{content.date}</span>
                      </div>
                      <p className="text-sm text-gray-600">{content.project}</p>
                    </div>
                    <div className={`ml-4 rtl:mr-4 rtl:ml-0 w-3 h-3 rounded-full ${content.status === 'published' ? 'bg-green-500' : 'bg-yellow-500'}`}></div>
                  </div>
                ))}
              </div>
              
              <button className="mt-6 w-full py-2 border border-blue-600 text-blue-600 rounded-md hover:bg-blue-50 font-medium flex items-center justify-center">
                <Plus className="w-4 h-4 mr-2 rtl:ml-2 rtl:mr-0" />
                {t('contentPlan')}
              </button>
            </section>
          </div>
          
          {/* Recent Files and Team Performance */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            {/* Recent Files */}
            <section className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-lg font-semibold">{t('recentFiles')}</h2>
                <a href="#" className="text-blue-600 text-sm font-medium hover:underline">{t('viewAll')}</a>
              </div>
              
              <div className="space-y-4">
                {recentFilesData.map(file => (
                  <div key={file.id} className="flex items-center p-3 border border-gray-100 rounded-lg">
                    <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3 rtl:ml-3 rtl:mr-0">
                      <FileText className="w-5 h-5 text-gray-600" />
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center justify-between mb-1">
                        <h3 className="font-medium">{file.name}</h3>
                        <span className="text-sm text-gray-500">{file.size}</span>
                      </div>
                      <p className="text-sm text-gray-600">{file.date}</p>
                    </div>
                  </div>
                ))}
              </div>
            </section>
            
            {/* Team Performance */}
            <section className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-lg font-semibold">{t('teamPerformance')}</h2>
                <a href="#" className="text-blue-600 text-sm font-medium hover:underline">{t('viewAll')}</a>
              </div>
              
              <div className="space-y-4">
                {teamPerformanceData.map(member => (
                  <div key={member.id} className="flex items-center justify-between p-3 border border-gray-100 rounded-lg">
                    <div className="flex items-center">
                      <div className="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium mr-3 rtl:ml-3 rtl:mr-0">
                        {member.name.charAt(0)}
                      </div>
                      <div>
                        <h3 className="font-medium">{member.name}</h3>
                        <p className="text-sm text-gray-600">{member.tasksCompleted} {t('tasks')}</p>
                      </div>
                    </div>
                    <div className="text-green-600 font-medium">{member.onTime}</div>
                  </div>
                ))}
              </div>
            </section>
          </div>
          
          {/* Notifications */}
          <section className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-lg font-semibold">{t('notifications')}</h2>
              <a href="#" className="text-blue-600 text-sm font-medium hover:underline">{t('viewAll')}</a>
            </div>
            
            <div className="space-y-4">
              {notificationsData.map(notification => (
                <div key={notification.id} className="flex items-start p-3 border border-gray-100 rounded-lg">
                  <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 rtl:ml-3 rtl:mr-0">
                    <Bell className="w-5 h-5 text-blue-600" />
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center justify-between mb-1">
                      <h3 className="font-medium">{notification.message}</h3>
                      <span className="text-sm text-gray-500">{notification.time}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </section>
        </div>
      </main>
    </div>
  );
};

export default MontagecoDashboard;