Task Dashboard

\n Showing {tasks.length} task{tasks.length !== 1 ? \"s\" : \"\"}\n

\n\n {/* Create Task Button */}\n {isAdmin && !showCreateForm && !editingTask && !showDetailsForm && (\n setShowCreateForm(true)}\n disabled={isLoadingEmployees}\n style={{\n backgroundColor: \"#1a7c38\",\n color: \"white\",\n padding: \"10px 15px\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n marginBottom: \"20px\",\n }}\n >\n Create New Task\n \n )}\n\n {/* Create Task Form */}\n {showCreateForm && (\n \n

Create New Task

\n Title*\n setNewTaskData({ ...newTaskData, title: e.target.value })}\n required\n style={{ width: \"100%\", padding: \"8px\" }}\n />\n

\n\n

\n Description\n setNewTaskData({ ...newTaskData, description: e.target.value })}\n style={{ width: \"100%\", padding: \"8px\", minHeight: \"100px\" }}\n />\n

\n\n

\n Assignee*\n \n setNewTaskData({\n ...newTaskData,\n assignee_id: e.target.value === \"\" ? \"\" : Number(e.target.value),\n })}\n required\n disabled={isLoadingEmployees}\n style={{ width: \"100%\", padding: \"8px\" }}\n >\n \n {availableAssignees.map(emp => (\n \n ))}\n \n

\n\n

\n Manager*\n \n setNewTaskData({ ...newTaskData, manager_id: e.target.value === \"\" ? \"\" : Number(e.target.value) })}\n required\n disabled={isLoadingEmployees}\n style={{ width: \"100%\", padding: \"8px\" }}\n >\n \n {managersAndDirectors.map(emp => (\n \n ))}\n \n

\n\n

\n Due Date*\n setNewTaskData({ ...newTaskData, due_date: e.target.value })}\n required\n style={{ width: \"100%\", padding: \"8px\" }}\n />\n

\n\n

\n Priority\n setNewTaskData({ ...newTaskData, priority: e.target.value })}\n style={{ width: \"100%\", padding: \"8px\" }}\n >\n {PRIORITY_OPTIONS.map(opt => (\n \n ))}\n \n

\n\n {createError &&

{createError}

}\n {createSuccess &&

Task created successfully!

}\n\n

\n \n {isCreating ? \"Creating...\" : \"Create Task\"}\n \n setShowCreateForm(false)}\n style={{\n backgroundColor: \"#ccc\",\n color: \"#333\",\n padding: \"10px 15px\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n }}\n >\n Cancel\n \n

\n )}\n\n {/* Edit Task Form */}\n {editingTask && editFormData && (\n \n

Edit Task

\n Title*\n setEditFormData({ ...editFormData, title: e.target.value })}\n required\n style={{ width: \"100%\", padding: \"8px\" }}\n />\n

\n\n

\n Description\n setEditFormData({ ...editFormData, description: e.target.value })}\n style={{ width: \"100%\", padding: \"8px\", minHeight: \"100px\" }}\n />\n

\n\n

\n Assignee*\n \n setEditFormData({\n ...editFormData,\n assignee_id: e.target.value === \"\" ? \"\" : Number(e.target.value),\n })}\n required\n disabled={isLoadingEmployees}\n style={{ width: \"100%\", padding: \"8px\" }}\n >\n \n {availableAssignees.map(emp => (\n \n ))}\n \n

\n\n

\n Manager*\n \n setEditFormData({\n ...editFormData,\n manager_id: e.target.value === \"\" ? \"\" : Number(e.target.value),\n })}\n required\n disabled={isLoadingEmployees}\n style={{ width: \"100%\", padding: \"8px\" }}\n >\n \n {managersAndDirectors.map(emp => (\n \n ))}\n \n

\n\n

\n Due Date*\n setEditFormData({ ...editFormData, due_date: e.target.value })}\n required\n style={{ width: \"100%\", padding: \"8px\" }}\n />\n

\n\n

\n Status*\n setEditFormData({ ...editFormData, status: e.target.value })}\n required\n style={{ width: \"100%\", padding: \"8px\" }}\n >\n {STATUS_OPTIONS.map(opt => (\n \n ))}\n \n

\n\n

\n Priority\n setEditFormData({ ...editFormData, priority: e.target.value })}\n style={{ width: \"100%\", padding: \"8px\" }}\n >\n {PRIORITY_OPTIONS.map(opt => (\n \n ))}\n \n

\n\n {(editFormData.status === \"completed\" || editFormData.status === \"cancelled\") && (\n

\n Final Remark\n \n setEditFormData({ ...editFormData, final_remark: e.target.value })}\n style={{ width: \"100%\", padding: \"8px\", minHeight: \"60px\" }}\n />\n

\n )}\n\n {editFormData.status === \"cancelled\" && (\n

\n Incompletion Reason\n setEditFormData({ ...editFormData, incompletion_reason: e.target.value })}\n style={{ width: \"100%\", padding: \"8px\", minHeight: \"60px\" }}\n />\n

\n )}\n\n {updateError &&

{updateError}

}\n {updateSuccess &&

Task updated successfully!

}\n\n

\n \n {isUpdating ? \"Updating...\" : \"Update Task\"}\n \n {\n setEditingTask(null);\n setEditFormData(null);\n }}\n style={{\n backgroundColor: \"#ccc\",\n color: \"#333\",\n padding: \"10px 15px\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n }}\n >\n Cancel\n \n

\n \n )}\n\n {/* Filters */}\n

\n Status Filter\n setStatusFilter(e.target.value)}\n style={{ padding: \"8px\", minWidth: \"150px\" }}\n >\n \n {STATUS_OPTIONS.map(status => (\n \n ))}\n \n

\n\n {isAdmin && (\n

\n Assignee Filter\n setAssigneeFilter(e.target.value === \"\" ? \"\" : Number(e.target.value))}\n style={{ padding: \"8px\", minWidth: \"200px\" }}\n disabled={isLoadingEmployees}\n >\n \n {employees.map(emp => (\n \n ))}\n \n

\n )}\n

\n\n {/* Tasks Grid */}\n {isLoadingTasks\n ?

Loading tasks...

\n : tasks.length === 0\n ? (\n

\n No tasks found. {isAdmin ? \"Create a new task to get started.\" : \"\"}\n

\n )\n : (\n

\n {tasks.map(task => (\n \n \n

{task.title}

\n \n {task.status.split(\"_\").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(\" \")}\n \n

\n\n

\n Assignee: {getEmployeeName(task.assignee_id)}\n

\n Manager: {getEmployeeName(task.manager_id)}\n

\n Due Date: {new Date(task.due_date).toLocaleDateString()}\n

\n Priority:\n \n {task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}\n \n

\n\n {task.description && (\n

\n {task.description.length > 100 ? `${task.description.substring(0, 100)}...` : task.description}\n

\n )}\n\n

\n setSelectedTask(task)}\n style={{\n backgroundColor: \"#007bff\",\n color: \"white\",\n padding: \"6px 12px\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n fontSize: \"12px\",\n }}\n >\n View Details\n \n\n {isAdmin && ( // Admin/CEO/Director/Manager can edit/delete\n <>\n handleEditTask(task)}\n style={{\n backgroundColor: \"#28a745\",\n color: \"white\",\n padding: \"6px 12px\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n fontSize: \"12px\",\n }}\n >\n Edit\n \n handleDeleteTask(task.id)}\n disabled={isDeleting === task.id}\n style={{\n backgroundColor: \"#dc3545\",\n color: \"white\",\n padding: \"6px 12px\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n fontSize: \"12px\",\n }}\n >\n {isDeleting === task.id ? \"Deleting...\" : \"Delete\"}\n \n \n )}\n\n {/* Quick Status Change Buttons - Workflow Specific */}\n {/* Only assignee can start (pending -> in_progress) */}\n {task.status === \"pending\" && currentUser?.id === task.assignee_id && (\n handleChangeStatus(task, \"in_progress\")}\n disabled={isChangingStatus === task.id}\n style={{\n backgroundColor: \"#1E90FF\",\n color: \"white\",\n padding: \"4px 8px\",\n border: \"none\",\n borderRadius: \"3px\",\n cursor: \"pointer\",\n fontSize: \"11px\",\n }}\n >\n Start\n \n )}\n {/* Only assignee can request completion (in_progress -> completion_requested) */}\n {task.status === \"in_progress\" && currentUser?.id === task.assignee_id && (\n handleChangeStatus(task, \"completion_requested\")}\n disabled={isChangingStatus === task.id}\n style={{\n backgroundColor: \"#FFD700\",\n color: \"black\",\n padding: \"4px 8px\",\n border: \"none\",\n borderRadius: \"3px\",\n cursor: \"pointer\",\n fontSize: \"11px\",\n }}\n >\n Request Completion\n \n )}\n {/* Only manager can approve/reject completion (completion_requested -> completed/in_progress) */}\n {task.status === \"completion_requested\" && currentUser?.id === task.manager_id && (\n <>\n handleChangeStatus(task, \"completed\")}\n disabled={isChangingStatus === task.id}\n style={{\n backgroundColor: \"#1E590C\",\n color: \"white\",\n padding: \"4px 8px\",\n border: \"none\",\n borderRadius: \"3px\",\n cursor: \"pointer\",\n fontSize: \"11px\",\n }}\n >\n Complete\n \n handleChangeStatus(task, \"in_progress\")}\n disabled={isChangingStatus === task.id}\n style={{\n backgroundColor: \"#1E90FF\",\n color: \"white\",\n padding: \"4px 8px\",\n border: \"none\",\n borderRadius: \"3px\",\n cursor: \"pointer\",\n fontSize: \"11px\",\n }}\n >\n Back to Progress\n \n \n )}\n {/* Add Cancel button for managers */}\n {currentUser?.id === task.manager_id && task.status !== \"completed\" && task.status !== \"cancelled\"\n && (\n handleChangeStatus(task, \"cancelled\")}\n disabled={isChangingStatus === task.id}\n style={{\n backgroundColor: \"#DD1407\",\n color: \"white\",\n padding: \"4px 8px\",\n border: \"none\",\n borderRadius: \"3px\",\n cursor: \"pointer\",\n fontSize: \"11px\",\n }}\n >\n Cancel Task\n \n )}\n

\n \n ))}\n \n )}\n\n {/* Task Details Modal */}\n {selectedTask && (\n setSelectedTask(null)}\n >\n e.stopPropagation()}\n >\n \n

{selectedTask.title}

\n setSelectedTask(null)}\n style={{\n backgroundColor: \"transparent\",\n border: \"none\",\n fontSize: \"24px\",\n cursor: \"pointer\",\n color: \"#666\",\n }}\n >\n ×\n \n \n\n

\n Status:\n \n {selectedTask.status.split(\"_\").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(\" \")}\n \n

\n Priority:\n \n {selectedTask.priority.charAt(0).toUpperCase() + selectedTask.priority.slice(1)}\n \n

\n Assignee: {getEmployeeName(selectedTask.assignee_id)}\n

\n Manager: {getEmployeeName(selectedTask.manager_id)}\n

\n Due Date: {new Date(selectedTask.due_date).toLocaleDateString()}\n

\n Created: {new Date(selectedTask.created_at).toLocaleDateString()}\n

\n\n {selectedTask.description && (\n

\n Description:\n

\n {selectedTask.description}\n

\n )}\n\n {selectedTask.final_remark && (\n

\n Final Remark:\n

\n {selectedTask.final_remark}\n

\n )}\n\n {selectedTask.incompletion_reason && (\n

\n Incompletion Reason:\n

\n {selectedTask.incompletion_reason}\n

\n )}\n\n {selectedTask.attachments && (\n

\n Attachments:\n

\n {selectedTask.attachments}\n

\n )}\n\n {selectedTask.completed_at && (\n

\n Completed At: {new Date(selectedTask.completed_at).toLocaleString()}\n

\n )}\n

\n\n

\n {isAdmin && (\n <>\n {\n setSelectedTask(null);\n handleEditTask(selectedTask);\n }}\n style={{\n backgroundColor: \"#28a745\",\n color: \"white\",\n padding: \"8px 16px\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n }}\n >\n Edit Task\n \n {\n setSelectedTask(null);\n handleDeleteTask(selectedTask.id);\n }}\n style={{\n backgroundColor: \"#dc3545\",\n color: \"white\",\n padding: \"8px 16px\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n }}\n >\n Delete Task\n \n \n )}\n setSelectedTask(null)}\n style={{\n backgroundColor: \"#6c757d\",\n color: \"white\",\n padding: \"8px 16px\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n }}\n >\n Close\n \n

\n \n \n )}\n\n {/* Task Completion/Cancellation Details Modal */}\n {showDetailsForm && detailsTask && (\n setShowDetailsForm(false)}\n >\n e.stopPropagation()}\n >\n \n

\n {detailsStatus === \"completed\" ? \"Complete Task\" : \"Cancel Task\"}\n

\n setShowDetailsForm(false)}\n style={{\n backgroundColor: \"transparent\",\n border: \"none\",\n fontSize: \"24px\",\n cursor: \"pointer\",\n color: \"#666\",\n }}\n >\n ×\n \n \n

\n Task: {detailsTask.title}\n

\n New Status:{\" \"}\n \n {detailsStatus?.split(\"_\").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(\" \")}\n \n

\n\n

\n Final Remark (Optional)\n setDetailsFormData({ ...detailsFormData, final_remark: e.target.value })}\n style={{ width: \"100%\", padding: \"8px\", minHeight: \"60px\" }}\n />\n

\n\n

\n \n Incompletion Reason\n {detailsStatus === \"cancelled\" && *}\n {detailsStatus === \"completed\" && (Optional)}\n \n setDetailsFormData({ ...detailsFormData, incompletion_reason: e.target.value })}\n required={detailsStatus === \"cancelled\"} // Required only for cancelled status\n style={{ width: \"100%\", padding: \"8px\", minHeight: \"60px\" }}\n />\n

\n\n

\n Attachments (Optional, e.g., URLs separated by commas)\n setDetailsFormData({ ...detailsFormData, attachments: e.target.value })}\n style={{ width: \"100%\", padding: \"8px\" }}\n />\n

\n\n {detailsError &&

{detailsError}

}\n\n

\n \n {isUpdating ? \"Submitting...\" : \"Submit\"}\n \n setShowDetailsForm(false)}\n style={{\n backgroundColor: \"#ccc\",\n color: \"#333\",\n padding: \"10px 15px\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n }}\n >\n Cancel\n \n

\n \n \n )}\n \n );\n};\n\nexport default TaskDashboard;","deleted","label",[171,154],"components","permalink","https://www.val.town/x/solomonferede/EEPPortal/code/components/taskDashboard.tsx","extension","actionData","errors"]