| | |
| | |
| | |
| | |
| | |
| | |
| | |
| |
|
| | |
| | |
| | |
| |
|
| | const StorageManager = { |
| | |
| | save(key, data) { |
| | try { |
| | localStorage.setItem(`taskflow_${key}`, JSON.stringify(data)); |
| | return true; |
| | } catch (error) { |
| | console.error('خطأ في حفظ البيانات:', error); |
| | return false; |
| | } |
| | }, |
| |
|
| | |
| | load(key, defaultValue = null) { |
| | try { |
| | const data = localStorage.getItem(`taskflow_${key}`); |
| | return data ? JSON.parse(data) : defaultValue; |
| | } catch (error) { |
| | console.error('خطأ في قراءة البيانات:', error); |
| | return defaultValue; |
| | } |
| | }, |
| |
|
| | |
| | remove(key) { |
| | try { |
| | localStorage.removeItem(`taskflow_${key}`); |
| | return true; |
| | } catch (error) { |
| | console.error('خطأ في حذف البيانات:', error); |
| | return false; |
| | } |
| | }, |
| |
|
| | |
| | clearAll() { |
| | const keys = ['tasks', 'projects', 'team', 'settings', 'user']; |
| | keys.forEach(key => this.remove(key)); |
| | } |
| | }; |
| |
|
| | |
| | |
| | |
| |
|
| | const NotificationManager = { |
| | notifications: [], |
| | |
| | init() { |
| | this.notifications = StorageManager.load('notifications', this.getDefaultNotifications()); |
| | this.render(); |
| | }, |
| | |
| | getDefaultNotifications() { |
| | return [ |
| | { |
| | id: 1, |
| | type: 'task', |
| | title: 'مهمة جديدة مُضافة', |
| | message: 'تم إضافة مهمة "تحديث التقرير الأسبوعي" بنجاح', |
| | time: 'منذ 5 دقائق', |
| | read: false |
| | }, |
| | { |
| | id: 2, |
| | type: 'comment', |
| | title: 'تعليق جديد', |
| | message: 'أحمد علّاش على مهمة "تصميم الواجهة"', |
| | time: 'منذ ساعة', |
| | read: false |
| | }, |
| | { |
| | id: 3, |
| | type: 'project', |
| | title: 'تحديث المشروع', |
| | message: 'تم تحديث حالة مشروع "تطبيق الجوال"', |
| | time: 'منذ ساعتين', |
| | read: false |
| | } |
| | ]; |
| | }, |
| | |
| | add(notification) { |
| | const newNotification = { |
| | id: Date.now(), |
| | time: 'الآن', |
| | read: false, |
| | ...notification |
| | }; |
| | this.notifications.unshift(newNotification); |
| | StorageManager.save('notifications', this.notifications); |
| | this.render(); |
| | this.updateCount(); |
| | }, |
| | |
| | markAsRead(id) { |
| | const notification = this.notifications.find(n => n.id === id); |
| | if (notification) { |
| | notification.read = true; |
| | StorageManager.save('notifications', this.notifications); |
| | this.render(); |
| | this.updateCount(); |
| | } |
| | }, |
| | |
| | markAllAsRead() { |
| | this.notifications.forEach(n => n.read = true); |
| | StorageManager.save('notifications', this.notifications); |
| | this.render(); |
| | this.updateCount(); |
| | }, |
| | |
| | updateCount() { |
| | const unreadCount = this.notifications.filter(n => !n.read).length; |
| | const badge = document.getElementById('notification-count'); |
| | if (badge) { |
| | badge.textContent = unreadCount; |
| | badge.style.display = unreadCount > 0 ? 'flex' : 'none'; |
| | } |
| | }, |
| | |
| | render() { |
| | const container = document.getElementById('notifications-list'); |
| | if (!container) return; |
| | |
| | container.innerHTML = this.notifications.map(notification => ` |
| | <div class="notification-item ${notification.read ? '' : 'unread'}" data-id="${notification.id}"> |
| | <div class="notification-icon ${notification.type}"> |
| | <i class="fas fa-${this.getIcon(notification.type)}"></i> |
| | </div> |
| | <div class="notification-content"> |
| | <h5>${notification.title}</h5> |
| | <p>${notification.message}</p> |
| | <span class="notification-time">${notification.time}</span> |
| | </div> |
| | </div> |
| | `).join(''); |
| | |
| | |
| | container.querySelectorAll('.notification-item').forEach(item => { |
| | item.addEventListener('click', () => { |
| | const id = parseInt(item.dataset.id); |
| | this.markAsRead(id); |
| | }); |
| | }); |
| | }, |
| | |
| | getIcon(type) { |
| | const icons = { |
| | task: 'tasks', |
| | comment: 'comment', |
| | project: 'project-diagram', |
| | user: 'user' |
| | }; |
| | return icons[type] || 'bell'; |
| | } |
| | }; |
| |
|
| | |
| | |
| | |
| |
|
| | const ProjectManager = { |
| | projects: [], |
| | |
| | init() { |
| | this.projects = StorageManager.load('projects', this.getSampleProjects()); |
| | this.renderProjectsList(); |
| | this.renderProjectsGrid(); |
| | this.renderKanbanFilter(); |
| | }, |
| | |
| | getSampleProjects() { |
| | return [ |
| | { |
| | id: 1, |
| | name: 'تطوير تطبيق الجوال', |
| | description: 'تطوير تطبيق جوال متكامل لادارة المهام والمشاريع', |
| | color: '#4a90d9', |
| | deadline: '2025-03-15', |
| | tasks: [ |
| | { id: 1, title: 'تصميم واجهة المستخدم', status: 'completed' }, |
| | { id: 2, title: 'برمجة الشاشة الرئيسية', status: 'in-progress' }, |
| | { id: 3, title: 'اختبار الأداء', status: 'pending' } |
| | ] |
| | }, |
| | { |
| | id: 2, |
| | name: 'مشروع الموقع الإلكتروني', |
| | description: 'إعادة تصميم وتطوير الموقع الإلكتروني للشركة', |
| | color: '#28a745', |
| | deadline: '2025-02-28', |
| | tasks: [ |
| | { id: 4, title: 'تحليل المتطلبات', status: 'completed' }, |
| | { id: 5, title: 'تصميم الهوية البصرية', status: 'completed' } |
| | ] |
| | }, |
| | { |
| | id: 3, |
| | name: 'حملة التسويق الرقمي', |
| | description: 'تنفيذ حملة تسويقية شاملة للمنتجات الجديدة', |
| | color: '#fd7e14', |
| | deadline: '2025-04-01', |
| | tasks: [ |
| | { id: 6, title: 'وضع الاستراتيجية', status: 'in-progress' } |
| | ] |
| | } |
| | ]; |
| | }, |
| | |
| | add(project) { |
| | const newProject = { |
| | id: Date.now(), |
| | tasks: [], |
| | ...project |
| | }; |
| | this.projects.push(newProject); |
| | StorageManager.save('projects', this.projects); |
| | this.renderProjectsList(); |
| | this.renderProjectsGrid(); |
| | this.renderKanbanFilter(); |
| | return newProject; |
| | }, |
| | |
| | update(id, updates) { |
| | const index = this.projects.findIndex(p => p.id === id); |
| | if (index !== -1) { |
| | this.projects[index] = { ...this.projects[index], ...updates }; |
| | StorageManager.save('projects', this.projects); |
| | this.renderProjectsList(); |
| | this.renderProjectsGrid(); |
| | this.renderKanbanFilter(); |
| | return true; |
| | } |
| | return false; |
| | }, |
| | |
| | delete(id) { |
| | this.projects = this.projects.filter(p => p.id !== id); |
| | StorageManager.save('projects', this.projects); |
| | this.renderProjectsList(); |
| | this.renderProjectsGrid(); |
| | this.renderKanbanFilter(); |
| | }, |
| | |
| | getProject(id) { |
| | return this.projects.find(p => p.id === id); |
| | }, |
| | |
| | getProjectName(id) { |
| | const project = this.getProject(id); |
| | return project ? project.name : 'بدون مشروع'; |
| | }, |
| | |
| | renderProjectsList() { |
| | const select = document.getElementById('task-filter-project'); |
| | const taskProjectSelect = document.getElementById('task-project-select'); |
| | const kanbanFilter = document.getElementById('kanban-project-filter'); |
| | |
| | if (select) { |
| | select.innerHTML = '<option value="all">جميع المشاريع</option>' + |
| | this.projects.map(p => `<option value="${p.id}">${p.name}</option>`).join(''); |
| | } |
| | |
| | if (taskProjectSelect) { |
| | taskProjectSelect.innerHTML = '<option value="">اختر المشروع</option>' + |
| | this.projects.map(p => `<option value="${p.id}">${p.name}</option>`).join(''); |
| | } |
| | |
| | if (kanbanFilter) { |
| | kanbanFilter.innerHTML = '<option value="all">جميع المشاريع</option>' + |
| | this.projects.map(p => `<option value="${p.id}">${p.name}</option>`).join(''); |
| | } |
| | }, |
| | |
| | renderProjectsGrid() { |
| | const grid = document.getElementById('projects-grid'); |
| | const empty = document.getElementById('empty-projects'); |
| | |
| | if (!grid) return; |
| | |
| | if (this.projects.length === 0) { |
| | grid.innerHTML = ''; |
| | if (empty) empty.classList.add('show'); |
| | return; |
| | } |
| | |
| | if (empty) empty.classList.remove('show'); |
| | |
| | grid.innerHTML = this.projects.map(project => { |
| | const completedTasks = project.tasks.filter(t => t.status === 'completed').length; |
| | const totalTasks = project.tasks.length; |
| | const progress = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0; |
| | |
| | return ` |
| | <div class="project-card" data-id="${project.id}"> |
| | <div class="project-header"> |
| | <div class="project-color-bar" style="background: linear-gradient(135deg, ${project.color}, ${project.color}dd)"></div> |
| | <div class="project-actions-overlay"> |
| | <button onclick="ProjectManager.editProject(${project.id})" title="تعديل"> |
| | <i class="fas fa-edit"></i> |
| | </button> |
| | <button onclick="ProjectManager.deleteProject(${project.id})" title="حذف"> |
| | <i class="fas fa-trash"></i> |
| | </button> |
| | </div> |
| | </div> |
| | <div class="project-body"> |
| | <h3 class="project-title">${project.name}</h3> |
| | <p class="project-description">${project.description || 'لا يوجد وصف'}</p> |
| | <div class="project-meta"> |
| | <div class="project-progress"> |
| | <div class="project-progress-bar"> |
| | <div class="project-progress-fill" style="width: ${progress}%"></div> |
| | </div> |
| | <span class="project-progress-text">${progress}%</span> |
| | </div> |
| | <span class="project-tasks-count">${totalTasks} مهام</span> |
| | </div> |
| | </div> |
| | </div> |
| | `; |
| | }).join(''); |
| | }, |
| | |
| | renderKanbanFilter() { |
| | |
| | }, |
| | |
| | editProject(id) { |
| | const project = this.getProject(id); |
| | if (!project) return; |
| | |
| | document.getElementById('project-id').value = id; |
| | document.getElementById('project-name').value = project.name; |
| | document.getElementById('project-description').value = project.description || ''; |
| | document.getElementById('project-color').value = project.color; |
| | document.getElementById('project-deadline').value = project.deadline || ''; |
| | document.getElementById('project-modal-title').textContent = 'تعديل المشروع'; |
| | |
| | ModalManager.open('project-modal'); |
| | }, |
| | |
| | deleteProject(id) { |
| | if (confirm('هل أنت متأكد من حذف هذا المشروع؟')) { |
| | this.delete(id); |
| | ToastManager.show('تم حذف المشروع بنجاح', 'success'); |
| | } |
| | } |
| | }; |
| |
|
| | |
| | |
| | |
| |
|
| | const TaskManager = { |
| | tasks: [], |
| | |
| | init() { |
| | this.tasks = StorageManager.load('tasks', this.getSampleTasks()); |
| | this.renderTasksList(); |
| | this.renderKanbanBoard(); |
| | this.renderDashboard(); |
| | this.renderCalendar(); |
| | }, |
| | |
| | getSampleTasks() { |
| | return [ |
| | { |
| | id: 1, |
| | title: 'إعداد التقرير الأسبوعي', |
| | description: 'إعداد تقرير شامل عن أداء الفريق خلال الأسبوع', |
| | projectId: 1, |
| | priority: 'high', |
| | status: 'in-progress', |
| | dueDate: '2025-01-20', |
| | featured: true, |
| | createdAt: new Date().toISOString() |
| | }, |
| | { |
| | id: 2, |
| | title: 'مراجعة التصميمات', |
| | description: 'مراجعة واعتماد التصميمات الجديدة للتطبيق', |
| | projectId: 1, |
| | priority: 'medium', |
| | status: 'pending', |
| | dueDate: '2025-01-22', |
| | featured: false, |
| | createdAt: new Date().toISOString() |
| | }, |
| | { |
| | id: 3, |
| | title: 'اختبار الوظائف', |
| | description: 'اختبار جميع وظائف التطبيق والتحقق من عدم وجود أخطاء', |
| | projectId: 1, |
| | priority: 'high', |
| | status: 'pending', |
| | dueDate: '2025-01-25', |
| | featured: true, |
| | createdAt: new Date().toISOString() |
| | }, |
| | { |
| | id: 4, |
| | title: 'تحديث الوثائق', |
| | description: 'تحديث وثائق المستخدم والتطوير', |
| | projectId: 2, |
| | priority: 'low', |
| | status: 'completed', |
| | dueDate: '2025-01-18', |
| | featured: false, |
| | createdAt: new Date().toISOString() |
| | }, |
| | { |
| | id: 5, |
| | title: 'اجتماع مع الفريق', |
| | description: 'اجتماع أسبوعي لمناقشة التقدم والمشاكل', |
| | projectId: 2, |
| | priority: 'medium', |
| | status: 'pending', |
| | dueDate: '2025-01-21', |
| | featured: false, |
| | createdAt: new Date().toISOString() |
| | }, |
| | { |
| | id: 6, |
| | title: 'إعداد الميزانية', |
| | description: 'إعداد ميزانية المشروع للربع القادم', |
| | projectId: 3, |
| | priority: 'high', |
| | status: 'in-progress', |
| | dueDate: '2025-01-23', |
| | featured: true, |
| | createdAt: new Date().toISOString() |
| | } |
| | ]; |
| | }, |
| | |
| | add(task) { |
| | const newTask = { |
| | id: Date.now(), |
| | status: 'pending', |
| | createdAt: new Date().toISOString(), |
| | ...task |
| | }; |
| | this.tasks.push(newTask); |
| | StorageManager.save('tasks', this.tasks); |
| | this.renderAll(); |
| | return newTask; |
| | }, |
| | |
| | update(id, updates) { |
| | const index = this.tasks.findIndex(t => t.id === id); |
| | if (index !== -1) { |
| | this.tasks[index] = { ...this.tasks[index], ...updates, updatedAt: new Date().toISOString() }; |
| | StorageManager.save('tasks', this.tasks); |
| | this.renderAll(); |
| | return true; |
| | } |
| | return false; |
| | }, |
| | |
| | delete(id) { |
| | this.tasks = this.tasks.filter(t => t.id !== id); |
| | StorageManager.save('tasks', this.tasks); |
| | this.renderAll(); |
| | }, |
| | |
| | toggleComplete(id) { |
| | const task = this.tasks.find(t => t.id === id); |
| | if (task) { |
| | task.status = task.status === 'completed' ? 'pending' : 'completed'; |
| | StorageManager.save('tasks', this.tasks); |
| | this.renderAll(); |
| | } |
| | }, |
| | |
| | getTask(id) { |
| | return this.tasks.find(t => t.id === id); |
| | }, |
| | |
| | getFilteredTasks(filters = {}) { |
| | let filtered = [...this.tasks]; |
| | |
| | if (filters.project && filters.project !== 'all') { |
| | filtered = filtered.filter(t => t.projectId == filters.project); |
| | } |
| | |
| | if (filters.status && filters.status !== 'all') { |
| | filtered = filtered.filter(t => t.status === filters.status); |
| | } |
| | |
| | if (filters.priority && filters.priority !== 'all') { |
| | filtered = filtered.filter(t => t.priority === filters.priority); |
| | } |
| | |
| | return filtered; |
| | }, |
| | |
| | renderAll() { |
| | this.renderTasksList(); |
| | this.renderKanbanBoard(); |
| | this.renderDashboard(); |
| | this.renderCalendar(); |
| | }, |
| | |
| | renderTasksList() { |
| | const container = document.getElementById('tasks-list'); |
| | const empty = document.getElementById('empty-tasks'); |
| | |
| | if (!container) return; |
| | |
| | const projectFilter = document.getElementById('task-filter-project')?.value || 'all'; |
| | const statusFilter = document.getElementById('task-filter-status')?.value || 'all'; |
| | const priorityFilter = document.getElementById('task-filter-priority')?.value || 'all'; |
| | |
| | const tasks = this.getFilteredTasks({ |
| | project: projectFilter, |
| | status: statusFilter, |
| | priority: priorityFilter |
| | }); |
| | |
| | if (tasks.length === 0) { |
| | container.innerHTML = ''; |
| | if (empty) empty.classList.add('show'); |
| | return; |
| | } |
| | |
| | if (empty) empty.classList.remove('show'); |
| | |
| | container.innerHTML = tasks.map(task => ` |
| | <div class="task-row ${task.status}" data-id="${task.id}"> |
| | <div class="task-checkbox" onclick="TaskManager.toggleComplete(${task.id})"> |
| | ${task.status === 'completed' ? '<i class="fas fa-check"></i>' : ''} |
| | </div> |
| | <div class="task-row-title">${task.title}</div> |
| | <div class="task-project">${ProjectManager.getProjectName(task.projectId)}</div> |
| | <div class="task-priority"> |
| | <span class="task-priority-badge ${task.priority}"> |
| | ${this.getPriorityLabel(task.priority)} |
| | </span> |
| | </div> |
| | <div class="task-due-date">${this.formatDate(task.dueDate)}</div> |
| | <div class="task-status"> |
| | <span class="task-priority-badge ${task.status}"> |
| | ${this.getStatusLabel(task.status)} |
| | </span> |
| | </div> |
| | <div class="task-row-actions"> |
| | <button onclick="TaskManager.viewTask(${task.id})" title="عرض"> |
| | <i class="fas fa-eye"></i> |
| | </button> |
| | <button onclick="TaskManager.editTask(${task.id})" title="تعديل"> |
| | <i class="fas fa-edit"></i> |
| | </button> |
| | <button class="delete" onclick="TaskManager.deleteTask(${task.id})" title="حذف"> |
| | <i class="fas fa-trash"></i> |
| | </button> |
| | </div> |
| | </div> |
| | `).join(''); |
| | }, |
| | |
| | renderKanbanBoard() { |
| | const projectFilter = document.getElementById('kanban-project-filter')?.value || 'all'; |
| | |
| | const tasks = this.getFilteredTasks({ project: projectFilter }); |
| | |
| | const columns = { |
| | pending: document.getElementById('kanban-pending'), |
| | 'in-progress': document.getElementById('kanban-in-progress'), |
| | completed: document.getElementById('kanban-completed') |
| | }; |
| | |
| | Object.keys(columns).forEach(status => { |
| | if (!columns[status]) return; |
| | |
| | const statusTasks = tasks.filter(t => t.status === status); |
| | |
| | columns[status].innerHTML = statusTasks.map(task => ` |
| | <div class="kanban-card" draggable="true" data-id="${task.id}"> |
| | <div class="kanban-card-title">${task.title}</div> |
| | <div class="kanban-card-meta"> |
| | <span class="kanban-card-project">${ProjectManager.getProjectName(task.projectId)}</span> |
| | <span class="task-priority-badge ${task.priority}"> |
| | ${this.getPriorityLabel(task.priority)} |
| | </span> |
| | </div> |
| | </div> |
| | `).join(''); |
| | |
| | |
| | const column = columns[status].closest('.kanban-column'); |
| | if (column) { |
| | column.querySelector('.task-count').textContent = statusTasks.length; |
| | } |
| | }); |
| | |
| | this.initKanbanDragDrop(); |
| | }, |
| | |
| | initKanbanDragDrop() { |
| | const cards = document.querySelectorAll('.kanban-card'); |
| | const columns = document.querySelectorAll('.column-content'); |
| | |
| | cards.forEach(card => { |
| | card.addEventListener('dragstart', (e) => { |
| | card.classList.add('dragging'); |
| | e.dataTransfer.setData('text/plain', card.dataset.id); |
| | }); |
| | |
| | card.addEventListener('dragend', () => { |
| | card.classList.remove('dragging'); |
| | }); |
| | }); |
| | |
| | columns.forEach(column => { |
| | column.addEventListener('dragover', (e) => { |
| | e.preventDefault(); |
| | const afterElement = this.getDragAfterElement(column, e.clientY); |
| | const draggable = document.querySelector('.dragging'); |
| | if (afterElement == null) { |
| | column.appendChild(draggable); |
| | } else { |
| | column.insertBefore(draggable, afterElement); |
| | } |
| | }); |
| | |
| | column.addEventListener('drop', (e) => { |
| | e.preventDefault(); |
| | const taskId = parseInt(e.dataTransfer.getData('text/plain')); |
| | const newStatus = column.id.replace('kanban-', ''); |
| | this.update(taskId, { status: newStatus }); |
| | }); |
| | }); |
| | }, |
| | |
| | getDragAfterElement(container, y) { |
| | const draggableElements = [...container.querySelectorAll('.kanban-card:not(.dragging)')]; |
| | |
| | return draggableElements.reduce((closest, child) => { |
| | const box = child.getBoundingClientRect(); |
| | const offset = y - box.top - box.height / 2; |
| | |
| | if (offset < 0 && offset > closest.offset) { |
| | return { offset: offset, element: child }; |
| | } else { |
| | return closest; |
| | } |
| | }, { offset: Number.NEGATIVE_INFINITY }).element; |
| | }, |
| | |
| | renderDashboard() { |
| | |
| | const totalTasks = this.tasks.length; |
| | const completedTasks = this.tasks.filter(t => t.status === 'completed').length; |
| | const pendingTasks = this.tasks.filter(t => t.status !== 'completed').length; |
| | const totalProjects = ProjectManager.projects.length; |
| | |
| | const totalEl = document.getElementById('total-tasks'); |
| | const completedEl = document.getElementById('completed-tasks'); |
| | const pendingEl = document.getElementById('pending-tasks'); |
| | const projectsEl = document.getElementById('total-projects'); |
| | |
| | if (totalEl) totalEl.textContent = totalTasks; |
| | if (completedEl) completedEl.textContent = completedTasks; |
| | if (pendingEl) pendingEl.textContent = pendingTasks; |
| | if (projectsEl) projectsEl.textContent = totalProjects; |
| | |
| | |
| | const completionPercentage = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0; |
| | const progressFill = document.getElementById('progress-fill'); |
| | const completionPercent = document.getElementById('completion-percentage'); |
| | |
| | if (progressFill) progressFill.style.width = `${completionPercentage}%`; |
| | if (completionPercent) completionPercent.textContent = `${completionPercentage}%`; |
| | |
| | |
| | const featuredTasks = this.tasks.filter(t => t.featured).slice(0, 5); |
| | const featuredContainer = document.getElementById('featured-tasks'); |
| | |
| | if (featuredContainer) { |
| | featuredContainer.innerHTML = featuredTasks.map(task => ` |
| | <li class="task-item ${task.status}" onclick="TaskManager.viewTask(${task.id})"> |
| | <div class="task-checkbox" onclick="event.stopPropagation(); TaskManager.toggleComplete(${task.id})"> |
| | ${task.status === 'completed' ? '<i class="fas fa-check"></i>' : ''} |
| | </div> |
| | <span class="task-text">${task.title}</span> |
| | <span class="task-priority-badge ${task.priority}"> |
| | ${this.getPriorityLabel(task.priority)} |
| | </span> |
| | </li> |
| | `).join(''); |
| | } |
| | |
| | |
| | const today = new Date().toISOString().split('T')[0]; |
| | const todayTasks = this.tasks.filter(t => t.dueDate === today).slice(0, 5); |
| | const todayContainer = document.getElementById('today-tasks'); |
| | |
| | if (todayContainer) { |
| | todayContainer.innerHTML = todayTasks.length > 0 ? todayTasks.map(task => ` |
| | <li class="task-item ${task.status}" onclick="TaskManager.viewTask(${task.id})"> |
| | <div class="task-checkbox" onclick="event.stopPropagation(); TaskManager.toggleComplete(${task.id})"> |
| | ${task.status === 'completed' ? '<i class="fas fa-check"></i>' : ''} |
| | </div> |
| | <span class="task-text">${task.title}</span> |
| | </li> |
| | `).join('') : '<li style="text-align: center; color: var(--text-muted); padding: 20px;">لا توجد مهام اليوم</li>'; |
| | } |
| | |
| | |
| | const highCount = this.tasks.filter(t => t.priority === 'high').length; |
| | const mediumCount = this.tasks.filter(t => t.priority === 'medium').length; |
| | const lowCount = this.tasks.filter(t => t.priority === 'low').length; |
| | const total = highCount + mediumCount + lowCount || 1; |
| | |
| | const highBar = document.getElementById('high-priority-bar'); |
| | const mediumBar = document.getElementById('medium-priority-bar'); |
| | const lowBar = document.getElementById('low-priority-bar'); |
| | |
| | if (highBar) highBar.style.width = `${(highCount / total) * 100}%`; |
| | if (mediumBar) mediumBar.style.width = `${(mediumCount / total) * 100}%`; |
| | if (lowBar) lowBar.style.width = `${(lowCount / total) * 100}%`; |
| | |
| | document.getElementById('high-priority-count').textContent = highCount; |
| | document.getElementById('medium-priority-count').textContent = mediumCount; |
| | document.getElementById('low-priority-count').textContent = lowCount; |
| | }, |
| | |
| | renderCalendar() { |
| | const grid = document.getElementById('calendar-grid'); |
| | if (!grid) return; |
| | |
| | const now = new Date(); |
| | const currentMonth = parseInt(window.currentMonth || now.getMonth()); |
| | const currentYear = parseInt(window.currentYear || now.getFullYear()); |
| | |
| | const monthNames = ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', |
| | 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر']; |
| | |
| | document.getElementById('current-month').textContent = `${monthNames[currentMonth]} ${currentYear}`; |
| | |
| | const firstDay = new Date(currentYear, currentMonth, 1).getDay(); |
| | const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate(); |
| | const daysInPrevMonth = new Date(currentYear, currentMonth, 0).getDate(); |
| | |
| | let html = ''; |
| | |
| | |
| | for (let i = firstDay - 1; i >= 0; i--) { |
| | html += `<div class="calendar-day other-month"><div class="calendar-day-number">${daysInPrevMonth - i}</div></div>`; |
| | } |
| | |
| | |
| | for (let day = 1; day <= daysInMonth; day++) { |
| | const dateStr = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`; |
| | const dayTasks = this.tasks.filter(t => t.dueDate === dateStr); |
| | const isToday = day === now.getDate() && currentMonth === now.getMonth() && currentYear === now.getFullYear(); |
| | |
| | html += ` |
| | <div class="calendar-day ${isToday ? 'today' : ''}" data-date="${dateStr}"> |
| | <div class="calendar-day-number">${day}</div> |
| | <div class="calendar-tasks"> |
| | ${dayTasks.slice(0, 2).map(task => ` |
| | <div class="calendar-task ${task.status} ${task.priority}" title="${task.title}"> |
| | ${task.title} |
| | </div> |
| | `).join('')} |
| | ${dayTasks.length > 2 ? `<div class="calendar-task" style="background: var(--bg-tertiary);">+${dayTasks.length - 2} أخرى</div>` : ''} |
| | </div> |
| | </div> |
| | `; |
| | } |
| | |
| | |
| | const totalCells = firstDay + daysInMonth; |
| | const remainingCells = 42 - totalCells; |
| | for (let i = 1; i <= remainingCells; i++) { |
| | html += `<div class="calendar-day other-month"><div class="calendar-day-number">${i}</div></div>`; |
| | } |
| | |
| | grid.innerHTML = html; |
| | }, |
| | |
| | formatDate(dateStr) { |
| | if (!dateStr) return '-'; |
| | const date = new Date(dateStr); |
| | return date.toLocaleDateString('ar-SA', { day: 'numeric', month: 'short' }); |
| | }, |
| | |
| | getPriorityLabel(priority) { |
| | const labels = { high: 'عالية', medium: 'متوسطة', low: 'منخفضة' }; |
| | return labels[priority] || priority; |
| | }, |
| | |
| | getStatusLabel(status) { |
| | const labels = { pending: 'قيد الانتظار', 'in-progress': 'قيد العمل', completed: 'مكتمل' }; |
| | return labels[status] || status; |
| | }, |
| | |
| | editTask(id) { |
| | const task = this.getTask(id); |
| | if (!task) return; |
| | |
| | document.getElementById('task-id').value = id; |
| | document.getElementById('task-title').value = task.title; |
| | document.getElementById('task-description').value = task.description || ''; |
| | document.getElementById('task-project-select').value = task.projectId || ''; |
| | document.getElementById('task-priority').value = task.priority; |
| | document.getElementById('task-due-date').value = task.dueDate || ''; |
| | document.getElementById('task-status').value = task.status; |
| | document.getElementById('task-featured').checked = task.featured || false; |
| | document.getElementById('task-modal-title').textContent = 'تعديل المهمة'; |
| | |
| | ModalManager.open('task-modal'); |
| | }, |
| | |
| | viewTask(id) { |
| | const task = this.getTask(id); |
| | if (!task) return; |
| | |
| | const content = document.getElementById('task-details-content'); |
| | content.innerHTML = ` |
| | <div class="task-detail-header"> |
| | <h2 class="task-detail-title">${task.title}</h2> |
| | <span class="task-priority-badge ${task.priority}">${this.getPriorityLabel(task.priority)}</span> |
| | </div> |
| | <div class="task-detail-meta"> |
| | <span><i class="fas fa-project-diagram"></i> ${ProjectManager.getProjectName(task.projectId)}</span> |
| | <span><i class="fas fa-flag"></i> ${this.getPriorityLabel(task.priority)}</span> |
| | <span><i class="fas fa-calendar"></i> ${this.formatDate(task.dueDate)}</span> |
| | <span class="task-priority-badge ${task.status}">${this.getStatusLabel(task.status)}</span> |
| | </div> |
| | <div class="task-detail-description"> |
| | <h4>الوصف</h4> |
| | <p>${task.description || 'لا يوجد وصف لهذه المهمة'}</p> |
| | </div> |
| | <div class="modal-footer"> |
| | <button class="btn btn-secondary" onclick="ModalManager.close('task-details-modal')">إغلاق</button> |
| | <button class="btn btn-primary" onclick="TaskManager.editTask(${task.id}); ModalManager.close('task-details-modal');"> |
| | <i class="fas fa-edit"></i> |
| | <span>تعديل</span> |
| | </button> |
| | </div> |
| | `; |
| | |
| | ModalManager.open('task-details-modal'); |
| | }, |
| | |
| | deleteTask(id) { |
| | if (confirm('هل أنت متأكد من حذف هذه المهمة؟')) { |
| | this.delete(id); |
| | ToastManager.show('تم حذف المهمة بنجاح', 'success'); |
| | } |
| | } |
| | }; |
| |
|
| | |
| | |
| | |
| |
|
| | const TeamManager = { |
| | members: [], |
| | |
| | init() { |
| | this.members = StorageManager.load('team', this.getSampleMembers()); |
| | this.renderTeamGrid(); |
| | }, |
| | |
| | getSampleMembers() { |
| | return [ |
| | { |
| | id: 1, |
| | name: 'أحمد محمد', |
| | role: 'مطور أمامي', |
| | avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Ahmed', |
| | tasksCompleted: 45, |
| | tasksInProgress: 5 |
| | }, |
| | { |
| | id: 2, |
| | name: 'سارة علي', |
| | role: 'مصممة', |
| | avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah', |
| | tasksCompleted: 38, |
| | tasksInProgress: 8 |
| | }, |
| | { |
| | id: 3, |
| | name: 'خالد عمر', |
| | role: 'مطور خلفي', |
| | avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Khalid', |
| | tasksCompleted: 52, |
| | tasksInProgress: 3 |
| | } |
| | ]; |
| | }, |
| | |
| | add(member) { |
| | const newMember = { |
| | id: Date.now(), |
| | tasksCompleted: 0, |
| | tasksInProgress: 1, |
| | ...member |
| | }; |
| | this.members.push(newMember); |
| | StorageManager.save('team', this.members); |
| | this.renderTeamGrid(); |
| | return newMember; |
| | }, |
| | |
| | renderTeamGrid() { |
| | const grid = document.getElementById('team-grid'); |
| | const empty = document.getElementById('empty-team'); |
| | |
| | if (!grid) return; |
| | |
| | if (this.members.length === 0) { |
| | grid.innerHTML = ''; |
| | if (empty) empty.classList.add('show'); |
| | return; |
| | } |
| | |
| | if (empty) empty.classList.remove('show'); |
| | |
| | grid.innerHTML = this.members.map((member, index) => ` |
| | <div class="team-member-card"> |
| | <img src="${member.avatar}" alt="${member.name}" class="member-avatar"> |
| | <h3 class="member-name">${member.name}</h3> |
| | <p class="member-role">${member.role}</p> |
| | <div class="member-stats"> |
| | <div class="member-stat"> |
| | <div class="member-stat-value">${member.tasksCompleted}</div> |
| | <div class="member-stat-label">مهام مكتملة</div> |
| | </div> |
| | <div class="member-stat"> |
| | <div class="member-stat-value">${member.tasksInProgress}</div> |
| | <div class="member-stat-label">قيد العمل</div> |
| | </div> |
| | </div> |
| | </div> |
| | `).join(''); |
| | |
| | |
| | this.renderTopPerformers(); |
| | }, |
| | |
| | renderTopPerformers() { |
| | const container = document.getElementById('top-performers'); |
| | if (!container) return; |
| | |
| | const sorted = [...this.members].sort((a, b) => b.tasksCompleted - a.tasksCompleted).slice(0, 5); |
| | |
| | container.innerHTML = sorted.map((member, index) => ` |
| | <div class="performer-item"> |
| | <div class="performer-rank ${index === 0 ? 'gold' : index === 1 ? 'silver' : index === 2 ? 'bronze' : ''}"> |
| | ${index + 1} |
| | </div> |
| | <div class="performer-info"> |
| | <div class="performer-name">${member.name}</div> |
| | <div class="performer-tasks">${member.tasksCompleted} مهمة مكتملة</div> |
| | </div> |
| | </div> |
| | `).join(''); |
| | } |
| | }; |
| |
|
| | |
| | |
| | |
| |
|
| | const ModalManager = { |
| | open(modalId) { |
| | const modal = document.getElementById(modalId); |
| | if (modal) { |
| | modal.classList.add('active'); |
| | document.body.style.overflow = 'hidden'; |
| | } |
| | }, |
| | |
| | close(modalId) { |
| | const modal = document.getElementById(modalId); |
| | if (modal) { |
| | modal.classList.remove('active'); |
| | document.body.style.overflow = ''; |
| | } |
| | }, |
| | |
| | init() { |
| | |
| | document.querySelectorAll('.modal-overlay').forEach(overlay => { |
| | overlay.addEventListener('click', () => { |
| | const modal = overlay.closest('.modal'); |
| | if (modal) { |
| | this.close(modal.id); |
| | } |
| | }); |
| | }); |
| | |
| | |
| | document.querySelectorAll('.modal-close, .modal-cancel').forEach(btn => { |
| | btn.addEventListener('click', () => { |
| | const modalId = btn.dataset.modal; |
| | if (modalId) { |
| | this.close(modalId); |
| | } |
| | }); |
| | }); |
| | |
| | |
| | document.addEventListener('keydown', (e) => { |
| | if (e.key === 'Escape') { |
| | document.querySelectorAll('.modal.active').forEach(modal => { |
| | this.close(modal.id); |
| | }); |
| | } |
| | }); |
| | } |
| | }; |
| |
|
| | |
| | |
| | |
| |
|
| | const ToastManager = { |
| | show(message, type = 'info', duration = 3000) { |
| | const container = document.getElementById('toast-container'); |
| | if (!container) return; |
| | |
| | const toast = document.createElement('div'); |
| | toast.className = `toast ${type}`; |
| | |
| | const icons = { |
| | success: 'check-circle', |
| | error: 'times-circle', |
| | warning: 'exclamation-triangle', |
| | info: 'info-circle' |
| | }; |
| | |
| | toast.innerHTML = ` |
| | <i class="fas fa-${icons[type]} toast-icon"></i> |
| | <span class="toast-message">${message}</span> |
| | `; |
| | |
| | container.appendChild(toast); |
| | |
| | setTimeout(() => { |
| | toast.style.animation = 'toastSlideIn 0.3s ease reverse'; |
| | setTimeout(() => toast.remove(), 300); |
| | }, duration); |
| | } |
| | }; |
| |
|
| | |
| | |
| | |
| |
|
| | const SettingsManager = { |
| | settings: {}, |
| | |
| | init() { |
| | this.settings = StorageManager.load('settings', { |
| | darkMode: false, |
| | primaryColor: 'blue', |
| | fontSize: 'medium', |
| | language: 'ar', |
| | notifications: { |
| | newTask: true, |
| | dueDate: true, |
| | comments: true, |
| | email: false |
| | } |
| | }); |
| | |
| | this.applySettings(); |
| | this.setupEventListeners(); |
| | }, |
| | |
| | save() { |
| | StorageManager.save('settings', this.settings); |
| | }, |
| | |
| | applySettings() { |
| | |
| | if (this.settings.darkMode) { |
| | document.body.setAttribute('data-theme', 'dark'); |
| | document.getElementById('dark-mode-toggle').checked = true; |
| | } else { |
| | document.body.removeAttribute('data-theme'); |
| | document.getElementById('dark-mode-toggle').checked = false; |
| | } |
| | |
| | |
| | document.body.setAttribute('data-color', this.settings.primaryColor); |
| | document.querySelectorAll('.color-option').forEach(btn => { |
| | btn.classList.toggle('active', btn.dataset.color === this.settings.primaryColor); |
| | }); |
| | |
| | |
| | document.body.setAttribute('data-font-size', this.settings.fontSize); |
| | document.getElementById('font-size').value = this.settings.fontSize; |
| | |
| | |
| | document.getElementById('interface-language').value = this.settings.language; |
| | document.getElementById('text-direction').value = this.settings.language === 'ar' ? 'rtl' : 'ltr'; |
| | |
| | |
| | if (document.getElementById('notify-new-task')) { |
| | document.getElementById('notify-new-task').checked = this.settings.notifications.newTask; |
| | } |
| | if (document.getElementById('notify-due-date')) { |
| | document.getElementById('notify-due-date').checked = this.settings.notifications.dueDate; |
| | } |
| | if (document.getElementById('notify-comments')) { |
| | document.getElementById('notify-comments').checked = this.settings.notifications.comments; |
| | } |
| | if (document.getElementById('notify-email')) { |
| | document.getElementById('notify-email').checked = this.settings.notifications.email; |
| | } |
| | |
| | |
| | const user = StorageManager.load('user', {}); |
| | if (user.name) { |
| | document.getElementById('settings-name').value = user.name; |
| | document.getElementById('user-name').textContent = user.name; |
| | } |
| | if (user.email) { |
| | document.getElementById('settings-email').value = user.email; |
| | } |
| | }, |
| | |
| | setupEventListeners() { |
| | |
| | document.getElementById('dark-mode-toggle')?.addEventListener('change', (e) => { |
| | this.settings.darkMode = e.target.checked; |
| | this.applySettings(); |
| | this.save(); |
| | }); |
| | |
| | |
| | document.querySelectorAll('.color-option').forEach(btn => { |
| | btn.addEventListener('click', () => { |
| | this.settings.primaryColor = btn.dataset.color; |
| | this.applySettings(); |
| | this.save(); |
| | ToastManager.show('تم تغيير اللون بنجاح', 'success'); |
| | }); |
| | }); |
| | |
| | |
| | document.getElementById('font-size')?.addEventListener('change', (e) => { |
| | this.settings.fontSize = e.target.value; |
| | this.applySettings(); |
| | this.save(); |
| | }); |
| | |
| | |
| | document.getElementById('interface-language')?.addEventListener('change', (e) => { |
| | this.settings.language = e.target.value; |
| | this.applySettings(); |
| | this.save(); |
| | ToastManager.show('يرجى إعادة تحميل الصفحة لتطبيق التغييرات', 'info'); |
| | }); |
| | |
| | |
| | document.getElementById('notify-new-task')?.addEventListener('change', (e) => { |
| | this.settings.notifications.newTask = e.target.checked; |
| | this.save(); |
| | }); |
| | |
| | document.getElementById('notify-due-date')?.addEventListener('change', (e) => { |
| | this.settings.notifications.dueDate = e.target.checked; |
| | this.save(); |
| | }); |
| | |
| | document.getElementById('notify-comments')?.addEventListener('change', (e) => { |
| | this.settings.notifications.comments = e.target.checked; |
| | this.save(); |
| | }); |
| | |
| | document.getElementById('notify-email')?.addEventListener('change', (e) => { |
| | this.settings.notifications.email = e.target.checked; |
| | this.save(); |
| | }); |
| | |
| | |
| | document.getElementById('profile-form')?.addEventListener('submit', (e) => { |
| | e.preventDefault(); |
| | const user = { |
| | name: document.getElementById('settings-name').value, |
| | email: document.getElementById('settings-email').value, |
| | phone: document.getElementById('settings-phone').value, |
| | bio: document.getElementById('settings-bio').value |
| | }; |
| | StorageManager.save('user', user); |
| | document.getElementById('user-name').textContent = user.name || 'مستخدم جديد'; |
| | ToastManager.show('تم حفظ التغييرات بنجاح', 'success'); |
| | }); |
| | |
| | |
| | document.getElementById('security-form')?.addEventListener('submit', (e) => { |
| | e.preventDefault(); |
| | const current = document.getElementById('current-password').value; |
| | const newPass = document.getElementById('new-password').value; |
| | const confirm = document.getElementById('confirm-new-password').value; |
| | |
| | if (!current) { |
| | ToastManager.show('الرجاء إدخال كلمة المرور الحالية', 'error'); |
| | return; |
| | } |
| | |
| | if (newPass !== confirm) { |
| | ToastManager.show('كلمتا المرور غير متطابقتين', 'error'); |
| | return; |
| | } |
| | |
| | if (newPass.length < 6) { |
| | ToastManager.show('كلمة المرور يجب أن تكون 6 أحرف على الأقل', 'error'); |
| | return; |
| | } |
| | |
| | ToastManager.show('تم تغيير كلمة المرور بنجاح', 'success'); |
| | e.target.reset(); |
| | }); |
| | |
| | |
| | document.querySelectorAll('.settings-sidebar li').forEach(item => { |
| | item.addEventListener('click', () => { |
| | const settingsId = item.dataset.settings; |
| | |
| | document.querySelectorAll('.settings-sidebar li').forEach(li => li.classList.remove('active')); |
| | document.querySelectorAll('.settings-panel').forEach(panel => panel.classList.remove('active')); |
| | |
| | item.classList.add('active'); |
| | document.getElementById(`settings-${settingsId}`)?.classList.add('active'); |
| | }); |
| | }); |
| | } |
| | }; |
| |
|
| | |
| | |
| | |
| |
|
| | const AuthManager = { |
| | user: null, |
| | |
| | init() { |
| | this.user = StorageManager.load('currentUser', null); |
| | |
| | if (this.user) { |
| | this.showMainApp(); |
| | } else { |
| | this.showLoginPage(); |
| | } |
| | |
| | this.setupEventListeners(); |
| | }, |
| | |
| | login(email, password) { |
| | |
| | if (email && password.length >= 6) { |
| | this.user = { |
| | email: email, |
| | name: email.split('@')[0], |
| | avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${email}` |
| | }; |
| | StorageManager.save('currentUser', this.user); |
| | this.showMainApp(); |
| | ToastManager.show('مرحباً بعودتك!', 'success'); |
| | return true; |
| | } |
| | ToastManager.show('البريد الإلكتروني أو كلمة المرور غير صحيحة', 'error'); |
| | return false; |
| | }, |
| | |
| | register(name, email, password) { |
| | if (name && email && password.length >= 6) { |
| | this.user = { |
| | name: name, |
| | email: email, |
| | avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${name}` |
| | }; |
| | StorageManager.save('currentUser', this.user); |
| | this.showMainApp(); |
| | ToastManager.show('تم إنشاء حسابك بنجاح!', 'success'); |
| | return true; |
| | } |
| | ToastManager.show('الرجاء تعبئة جميع الحقول بشكل صحيح', 'error'); |
| | return false; |
| | }, |
| | |
| | logout() { |
| | this.user = null; |
| | StorageManager.remove('currentUser'); |
| | this.showLoginPage(); |
| | ToastManager.show('تم تسجيل الخروج بنجاح', 'info'); |
| | }, |
| | |
| | showLoginPage() { |
| | document.getElementById('login-page').classList.remove('hidden'); |
| | document.getElementById('main-app').classList.add('hidden'); |
| | document.getElementById('loading-screen').classList.add('hidden'); |
| | }, |
| | |
| | showMainApp() { |
| | document.getElementById('login-page').classList.add('hidden'); |
| | document.getElementById('main-app').classList.remove('hidden'); |
| | document.getElementById('loading-screen').classList.add('hidden'); |
| | |
| | if (this.user) { |
| | document.getElementById('user-name').textContent = this.user.name || 'مستخدم جديد'; |
| | } |
| | }, |
| | |
| | setupEventListeners() { |
| | |
| | document.getElementById('login-form')?.addEventListener('submit', (e) => { |
| | e.preventDefault(); |
| | const email = document.getElementById('login-email').value; |
| | const password = document.getElementById('login-password').value; |
| | this.login(email, password); |
| | }); |
| | |
| | |
| | document.getElementById('register-form')?.addEventListener('submit', (e) => { |
| | e.preventDefault(); |
| | const name = document.getElementById('register-name').value; |
| | const email = document.getElementById('register-email').value; |
| | const password = document.getElementById('register-password').value; |
| | const confirm = document.getElementById('register-confirm').value; |
| | |
| | if (password !== confirm) { |
| | ToastManager.show('كلمتا المرور غير متطابقتين', 'error'); |
| | return; |
| | } |
| | |
| | this.register(name, email, password); |
| | }); |
| | |
| | |
| | document.getElementById('show-register')?.addEventListener('click', (e) => { |
| | e.preventDefault(); |
| | document.getElementById('login-form').classList.add('hidden'); |
| | document.getElementById('register-form').classList.remove('hidden'); |
| | }); |
| | |
| | document.getElementById('show-login')?.addEventListener('click', (e) => { |
| | e.preventDefault(); |
| | document.getElementById('register-form').classList.add('hidden'); |
| | document.getElementById('login-form').classList.remove('hidden'); |
| | }); |
| | |
| | |
| | document.getElementById('logout-btn')?.addEventListener('click', (e) => { |
| | e.preventDefault(); |
| | this.logout(); |
| | }); |
| | |
| | |
| | document.querySelectorAll('[data-action="logout"]').forEach(btn => { |
| | btn.addEventListener('click', (e) => { |
| | e.preventDefault(); |
| | this.logout(); |
| | }); |
| | }); |
| | |
| | |
| | document.querySelector('[data-action="settings"]')?.addEventListener('click', (e) => { |
| | e.preventDefault(); |
| | this.switchView('settings'); |
| | }); |
| | }, |
| | |
| | switchView(viewName) { |
| | document.querySelectorAll('.view').forEach(v => v.classList.remove('active')); |
| | document.querySelectorAll('.sidebar-nav li').forEach(l => l.classList.remove('active')); |
| | |
| | const view = document.getElementById(`${viewName}-view`); |
| | const navItem = document.querySelector(`.sidebar-nav li[data-view="${viewName}"]`); |
| | |
| | if (view) view.classList.add('active'); |
| | if (navItem) navItem.classList.add('active'); |
| | |
| | |
| | document.getElementById('user-menu')?.classList.remove('active'); |
| | } |
| | }; |
| |
|
| | |
| | |
| | |
| |
|
| | const NavigationManager = { |
| | init() { |
| | |
| | document.querySelectorAll('.sidebar-nav li, .sidebar-footer li').forEach(item => { |
| | item.addEventListener('click', (e) => { |
| | e.preventDefault(); |
| | const viewName = item.dataset.view; |
| | if (viewName) { |
| | this.switchView(viewName); |
| | } |
| | }); |
| | }); |
| | |
| | |
| | document.getElementById('user-btn')?.addEventListener('click', () => { |
| | document.getElementById('user-menu')?.classList.toggle('active'); |
| | }); |
| | |
| | |
| | document.getElementById('notifications-btn')?.addEventListener('click', () => { |
| | document.getElementById('notifications-menu')?.classList.toggle('active'); |
| | }); |
| | |
| | |
| | document.querySelector('.mark-all-read')?.addEventListener('click', () => { |
| | NotificationManager.markAllAsRead(); |
| | ToastManager.show('تم تعليم جميع الإشعارات كمقروءة', 'success'); |
| | }); |
| | |
| | |
| | document.getElementById('sidebar-toggle')?.addEventListener('click', () => { |
| | document.getElementById('sidebar').classList.toggle('collapsed'); |
| | document.body.classList.toggle('sidebar-collapsed'); |
| | }); |
| | |
| | |
| | document.getElementById('menu-toggle')?.addEventListener('click', () => { |
| | document.getElementById('sidebar').classList.toggle('active'); |
| | }); |
| | |
| | |
| | document.addEventListener('click', (e) => { |
| | if (!e.target.closest('.user-dropdown')) { |
| | document.getElementById('user-menu')?.classList.remove('active'); |
| | } |
| | if (!e.target.closest('.notifications-dropdown')) { |
| | document.getElementById('notifications-menu')?.classList.remove('active'); |
| | } |
| | if (!e.target.closest('.sidebar') && !e.target.closest('.menu-toggle')) { |
| | document.getElementById('sidebar')?.classList.remove('active'); |
| | } |
| | }); |
| | |
| | |
| | document.getElementById('task-filter-project')?.addEventListener('change', () => { |
| | TaskManager.renderTasksList(); |
| | }); |
| | |
| | document.getElementById('task-filter-status')?.addEventListener('change', () => { |
| | TaskManager.renderTasksList(); |
| | }); |
| | |
| | document.getElementById('task-filter-priority')?.addEventListener('change', () => { |
| | TaskManager.renderTasksList(); |
| | }); |
| | |
| | |
| | document.getElementById('kanban-project-filter')?.addEventListener('change', () => { |
| | TaskManager.renderKanbanBoard(); |
| | }); |
| | |
| | |
| | document.querySelectorAll('.view-all').forEach(btn => { |
| | btn.addEventListener('click', (e) => { |
| | e.preventDefault(); |
| | const view = btn.dataset.view; |
| | if (view) { |
| | this.switchView(view); |
| | } |
| | }); |
| | }); |
| | }, |
| | |
| | switchView(viewName) { |
| | document.querySelectorAll('.view').forEach(v => v.classList.remove('active')); |
| | document.querySelectorAll('.sidebar-nav li').forEach(l => l.classList.remove('active')); |
| | |
| | const view = document.getElementById(`${viewName}-view`); |
| | const navItem = document.querySelector(`.sidebar-nav li[data-view="${viewName}"]`); |
| | |
| | if (view) { |
| | view.classList.add('active'); |
| | this.updateViewTitle(viewName); |
| | } |
| | |
| | if (navItem) navItem.classList.add('active'); |
| | |
| | |
| | if (viewName === 'calendar') { |
| | TaskManager.renderCalendar(); |
| | } |
| | }, |
| | |
| | updateViewTitle(viewName) { |
| | const titles = { |
| | dashboard: 'لوحة التحكم', |
| | tasks: 'المهام', |
| | projects: 'المشاريع', |
| | kanban: 'لوحة كانبان', |
| | calendar: 'التقويم', |
| | team: 'الفريق', |
| | analytics: 'التحليلات', |
| | settings: 'الإعدادات' |
| | }; |
| | |
| | const viewHeader = document.querySelector('#dashboard-view.active .view-header h1'); |
| | if (viewHeader && titles[viewName]) { |
| | viewHeader.textContent = titles[viewName]; |
| | } |
| | } |
| | }; |
| |
|
| | |
| | |
| | |
| |
|
| | const FormManager = { |
| | init() { |
| | |
| | document.getElementById('task-form')?.addEventListener('submit', (e) => { |
| | e.preventDefault(); |
| | |
| | const taskData = { |
| | title: document.getElementById('task-title').value, |
| | description: document.getElementById('task-description').value, |
| | projectId: parseInt(document.getElementById('task-project-select').value) || null, |
| | priority: document.getElementById('task-priority').value, |
| | dueDate: document.getElementById('task-due-date').value, |
| | status: document.getElementById('task-status').value, |
| | featured: document.getElementById('task-featured').checked |
| | }; |
| | |
| | const taskId = document.getElementById('task-id').value; |
| | |
| | if (taskId) { |
| | TaskManager.update(parseInt(taskId), taskData); |
| | ToastManager.show('تم تحديث المهمة بنجاح', 'success'); |
| | } else { |
| | TaskManager.add(taskData); |
| | ToastManager.show('تم إضافة المهمة بنجاح', 'success'); |
| | } |
| | |
| | ModalManager.close('task-modal'); |
| | e.target.reset(); |
| | }); |
| | |
| | |
| | document.getElementById('project-form')?.addEventListener('submit', (e) => { |
| | e.preventDefault(); |
| | |
| | const projectData = { |
| | name: document.getElementById('project-name').value, |
| | description: document.getElementById('project-description').value, |
| | color: document.getElementById('project-color').value, |
| | deadline: document.getElementById('project-deadline').value |
| | }; |
| | |
| | const projectId = document.getElementById('project-id').value; |
| | |
| | if (projectId) { |
| | ProjectManager.update(parseInt(projectId), projectData); |
| | ToastManager.show('تم تحديث المشروع بنجاح', 'success'); |
| | } else { |
| | ProjectManager.add(projectData); |
| | ToastManager.show('تم إنشاء المشروع بنجاح', 'success'); |
| | } |
| | |
| | ModalManager.close('project-modal'); |
| | e.target.reset(); |
| | }); |
| | |
| | |
| | document.getElementById('invite-form')?.addEventListener('submit', (e) => { |
| | e.preventDefault(); |
| | |
| | const inviteData = { |
| | email: document.getElementById('invite-email').value, |
| | role: document.getElementById('invite-role').value |
| | }; |
| | |
| | |
| | ToastManager.show(`تم إرسال الدعوة إلى ${inviteData.email}`, 'success'); |
| | ModalManager.close('invite-modal'); |
| | e.target.reset(); |
| | }); |
| | } |
| | }; |
| |
|
| | |
| | |
| | |
| |
|
| | const ActionManager = { |
| | init() { |
| | |
| | document.getElementById('new-task-btn')?.addEventListener('click', () => this.openTaskModal()); |
| | document.getElementById('add-task-btn')?.addEventListener('click', () => this.openTaskModal()); |
| | document.getElementById('empty-add-task')?.addEventListener('click', () => this.openTaskModal()); |
| | document.getElementById('quick-add')?.addEventListener('click', () => this.toggleQuickAdd()); |
| | |
| | |
| | document.getElementById('quick-task-add')?.addEventListener('click', () => this.addQuickTask()); |
| | document.getElementById('quick-task-input')?.addEventListener('keypress', (e) => { |
| | if (e.key === 'Enter') this.addQuickTask(); |
| | }); |
| | |
| | |
| | document.getElementById('add-project-btn')?.addEventListener('click', () => this.openProjectModal()); |
| | document.getElementById('empty-add-project')?.addEventListener('click', () => this.openProjectModal()); |
| | |
| | |
| | document.getElementById('invite-member-btn')?.addEventListener('click', () => { |
| | ModalManager.open('invite-modal'); |
| | }); |
| | document.getElementById('empty-invite')?.addEventListener('click', () => { |
| | ModalManager.open('invite-modal'); |
| | }); |
| | |
| | |
| | document.querySelectorAll('.add-task-to-column').forEach(btn => { |
| | btn.addEventListener('click', () => { |
| | const status = btn.dataset.status; |
| | document.getElementById('task-status').value = status; |
| | this.openTaskModal(); |
| | }); |
| | }); |
| | |
| | |
| | document.getElementById('calendar-prev')?.addEventListener('click', () => this.navigateCalendar(-1)); |
| | document.getElementById('calendar-next')?.addEventListener('click', () => this.navigateCalendar(1)); |
| | document.getElementById('today-btn')?.addEventListener('click', () => { |
| | window.currentMonth = new Date().getMonth(); |
| | window.currentYear = new Date().getFullYear(); |
| | TaskManager.renderCalendar(); |
| | }); |
| | |
| | |
| | document.getElementById('google-login')?.addEventListener('click', () => { |
| | AuthManager.login('demo@gmail.com', '123456'); |
| | }); |
| | |
| | document.getElementById('github-login')?.addEventListener('click', () => { |
| | AuthManager.login('demo@github.com', '123456'); |
| | }); |
| | }, |
| | |
| | openTaskModal() { |
| | document.getElementById('task-id').value = ''; |
| | document.getElementById('task-form').reset(); |
| | document.getElementById('task-modal-title').textContent = 'إضافة مهمة جديدة'; |
| | ModalManager.open('task-modal'); |
| | }, |
| | |
| | openProjectModal() { |
| | document.getElementById('project-id').value = ''; |
| | document.getElementById('project-form').reset(); |
| | document.getElementById('project-modal-title').textContent = 'إنشاء مشروع جديد'; |
| | ModalManager.open('project-modal'); |
| | }, |
| | |
| | toggleQuickAdd() { |
| | const popup = document.getElementById('quick-add-popup'); |
| | popup?.classList.toggle('hidden'); |
| | if (!popup?.classList.contains('hidden')) { |
| | document.getElementById('quick-task-input')?.focus(); |
| | } |
| | }, |
| | |
| | addQuickTask() { |
| | const input = document.getElementById('quick-task-input'); |
| | const title = input.value.trim(); |
| | |
| | if (title) { |
| | TaskManager.add({ |
| | title: title, |
| | priority: 'medium', |
| | projectId: ProjectManager.projects[0]?.id || null |
| | }); |
| | ToastManager.show('تم إضافة المهمة', 'success'); |
| | input.value = ''; |
| | } |
| | }, |
| | |
| | navigateCalendar(direction) { |
| | const now = new Date(); |
| | const currentMonth = parseInt(window.currentMonth || now.getMonth()); |
| | const currentYear = parseInt(window.currentYear || now.getFullYear()); |
| | |
| | let newMonth = currentMonth + direction; |
| | let newYear = currentYear; |
| | |
| | if (newMonth > 11) { |
| | newMonth = 0; |
| | newYear++; |
| | } else if (newMonth < 0) { |
| | newMonth = 11; |
| | newYear--; |
| | } |
| | |
| | window.currentMonth = newMonth; |
| | window.currentYear = newYear; |
| | TaskManager.renderCalendar(); |
| | } |
| | }; |
| |
|
| | |
| | |
| | |
| |
|
| | const ChartManager = { |
| | charts: {}, |
| | |
| | init() { |
| | this.renderTasksChart(); |
| | this.renderPriorityChart(); |
| | }, |
| | |
| | renderTasksChart() { |
| | const ctx = document.getElementById('tasks-chart'); |
| | if (!ctx) return; |
| | |
| | const tasks = TaskManager.tasks; |
| | const completed = tasks.filter(t => t.status === 'completed').length; |
| | const inProgress = tasks.filter(t => t.status === 'in-progress').length; |
| | const pending = tasks.filter(t => t.status === 'pending').length; |
| | |
| | if (this.charts.tasks) { |
| | this.charts.tasks.destroy(); |
| | } |
| | |
| | this.charts.tasks = new Chart(ctx, { |
| | type: 'bar', |
| | data: { |
| | labels: ['مكتمل', 'قيد العمل', 'قيد الانتظار'], |
| | datasets: [{ |
| | label: 'عدد المهام', |
| | data: [completed, inProgress, pending], |
| | backgroundColor: ['#28a745', '#4a90d9', '#ffc107'], |
| | borderRadius: 8 |
| | }] |
| | }, |
| | options: { |
| | responsive: true, |
| | maintainAspectRatio: false, |
| | plugins: { |
| | legend: { |
| | display: false |
| | } |
| | }, |
| | scales: { |
| | y: { |
| | beginAtZero: true, |
| | ticks: { |
| | stepSize: 1 |
| | } |
| | } |
| | } |
| | } |
| | }); |
| | }, |
| | |
| | renderPriorityChart() { |
| | const ctx = document.getElementById('priority-chart'); |
| | if (!ctx) return; |
| | |
| | const tasks = TaskManager.tasks; |
| | const high = tasks.filter(t => t.priority === 'high').length; |
| | const medium = tasks.filter(t => t.priority === 'medium').length; |
| | const low = tasks.filter(t => t.priority === 'low').length; |
| | |
| | if (this.charts.priority) { |
| | this.charts.priority.destroy(); |
| | } |
| | |
| | this.charts.priority = new Chart(ctx, { |
| | type: 'doughnut', |
| | data: { |
| | labels: ['عالية', 'متوسطة', 'منخفضة'], |
| | datasets: [{ |
| | data: [high, medium, low], |
| | backgroundColor: ['#dc3545', '#ffc107', '#28a745'], |
| | borderWidth: 0 |
| | }] |
| | }, |
| | options: { |
| | responsive: true, |
| | maintainAspectRatio: false, |
| | plugins: { |
| | legend: { |
| | position: 'bottom' |
| | } |
| | } |
| | } |
| | }); |
| | |
| | |
| | const total = tasks.length || 1; |
| | const completed = tasks.filter(t => t.status === 'completed').length; |
| | const rate = Math.round((completed / total) * 100); |
| | |
| | const completionCircle = document.getElementById('completion-circle'); |
| | const completionValue = document.getElementById('completion-rate-value'); |
| | |
| | if (completionCircle) { |
| | const circumference = 283; |
| | const offset = circumference - (rate / 100) * circumference; |
| | completionCircle.style.strokeDashoffset = offset; |
| | } |
| | |
| | if (completionValue) { |
| | completionValue.textContent = rate; |
| | } |
| | } |
| | }; |
| |
|
| | |
| | |
| | |
| |
|
| | document.addEventListener('DOMContentLoaded', () => { |
| | |
| | setTimeout(() => { |
| | document.getElementById('loading-screen').classList.add('hidden'); |
| | }, 1500); |
| | |
| | |
| | AuthManager.init(); |
| | ProjectManager.init(); |
| | TaskManager.init(); |
| | TeamManager.init(); |
| | NotificationManager.init(); |
| | SettingsManager.init(); |
| | ModalManager.init(); |
| | NavigationManager.init(); |
| | FormManager.init(); |
| | ActionManager.init(); |
| | ChartManager.init(); |
| | |
| | |
| | window.currentMonth = new Date().getMonth(); |
| | window.currentYear = new Date().getFullYear(); |
| | |
| | console.log('✅ تم تهيئة TaskFlow Pro بنجاح'); |
| | }); |
| |
|
| | |
| | window.ProjectManager = ProjectManager; |
| | window.TaskManager = TaskManager; |
| | window.ModalManager = ModalManager; |
| | window.ToastManager = ToastManager; |
| | window.AuthManager = AuthManager; |
| |
|
