feat: Implement task editing functionality and improve UI components

- Added EditTaskModal component for editing tasks.
- Integrated EditTaskModal into TaskTab for task editing.
- Refactored AddInternsDialog for better UI and functionality.
- Created AddInternsToProjects component for adding interns to projects.
- Enhanced CreateProjectDialog and CreateTaskDialog with improved styling.
- Introduced EditSubmissionTask component for editing submission tasks.
- Added ProtectedRoutes for route protection based on user roles.
- Implemented API utility for handling requests with authorization.
- Removed obsolete InternRoute and MentorRoute files.
- Updated global CSS styles for better responsiveness and aesthetics.
This commit is contained in:
Kemas M. Aryadary Rasyad
2026-06-22 21:01:25 +07:00
parent ff68115fca
commit dc64fadfdd
21 changed files with 785 additions and 190 deletions
@@ -1,5 +1,5 @@
import { useRef, useEffect, useState } from "react";
import { X, Calendar, Clock, FileText, Link } from "lucide-react";
import { X, FileText, Link } from "lucide-react";
interface CreateTaskModalProps {
isOpen: boolean;
@@ -51,12 +51,12 @@ export default function CreateTaskModal({ isOpen, onClose }: CreateTaskModalProp
return (
<dialog
ref={dialogRef}
className="custom-dialog"
className="custom-dialog p-[1.5rem]"
>
{/* Header Modal */}
<div className="dialog-header">
<div>
<h2 className="text-xl font-bold text-[#B30000] tracking-tight">Create New Task</h2>
<h2 className="text-[26px] font-bold text-[#B30000] tracking-tight">Create New Task</h2>
<p className="text-xs text-gray-400 font-medium mt-0.5">
Fill in the details for the next intern assignment.
</p>
@@ -67,10 +67,10 @@ export default function CreateTaskModal({ isOpen, onClose }: CreateTaskModalProp
</div>
{/* Body Form Modal (Scrollable jika layar pendek) */}
<form onSubmit={handleSubmit} className="p-6 space-y-4 overflow-y-auto flex-1">
<form onSubmit={handleSubmit} className="px-6 space-y-4 overflow-y-auto flex-1">
{/* Task Title */}
<div className="space-y-1.5">
<div className="">
<label className="text-xs font-bold text-gray-700 tracking-wide">Task Title</label>
<input
type="text"
@@ -78,7 +78,7 @@ export default function CreateTaskModal({ isOpen, onClose }: CreateTaskModalProp
placeholder="e.g., Design High-Fidelity Prototypes"
value={taskTitle}
onChange={(e) => setTaskTitle(e.target.value)}
className="w-full px-3 py-2 bg-white border border-gray-200 rounded-lg text-xs font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000]"
className="w-full px-3 py-4 bg-white border border-gray-200 rounded-lg text-xs font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000]"
/>
</div>
@@ -104,9 +104,8 @@ export default function CreateTaskModal({ isOpen, onClose }: CreateTaskModalProp
required
value={deadlineDate}
onChange={(e) => setDeadlineDate(e.target.value)}
className="w-full pl-3 pr-9 py-2 bg-white border border-gray-200 rounded-lg text-xs font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000]"
className="w-full pl-3 pr-9 py-3 bg-white border border-gray-200 rounded-lg text-xs font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000]"
/>
<Calendar className="absolute right-3 top-2.5 w-4 h-4 text-gray-400 pointer-events-none" />
</div>
</div>
@@ -118,9 +117,8 @@ export default function CreateTaskModal({ isOpen, onClose }: CreateTaskModalProp
required
value={specificTime}
onChange={(e) => setSpecificTime(e.target.value)}
className="w-full pl-3 pr-9 py-2 bg-white border border-gray-200 rounded-lg text-xs font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000]"
className="w-full pl-3 pr-9 py-3 bg-white border border-gray-200 rounded-lg text-xs font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000]"
/>
<Clock className="absolute right-3 top-2.5 w-4 h-4 text-gray-400 pointer-events-none" />
</div>
</div>
</div>
@@ -172,13 +170,13 @@ export default function CreateTaskModal({ isOpen, onClose }: CreateTaskModalProp
<button
type="button"
onClick={onClose}
className="px-5 py-2 border border-gray-200 rounded-xl text-xs font-semibold text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition-colors"
className="p-3 border border-gray-200 rounded-xl text-xs font-semibold text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition-colors"
>
Cancel
</button>
<button
type="submit"
className="px-5 py-2 bg-[#B30000] hover:bg-[#990000] text-white text-xs font-bold rounded-xl transition-colors shadow-md"
className="p-3 bg-[#B30000] hover:bg-[#990000] text-white text-xs font-bold rounded-xl transition-colors shadow-md"
>
Save Task
</button>