feat: Refactor Mentor Settings Page and improve user profile handling
- Removed MentorSettingsPage component to streamline user profile management. - Updated ProjectForumTab and ProjectsInternTab for better UI/UX. - Enhanced ProjectsPage loading state with a spinner. - Improved TaskTab to handle loading states and error messages more effectively. - Added new utility functions for user initials and file URL resolution. - Updated UserService to normalize user data and handle profile updates more efficiently. - Enhanced CSS styles for better visual consistency across components. - Added new properties to CurrentUser type for better user data management.
This commit is contained in:
Kemas M. Aryadary Rasyad
@@ -20,7 +20,7 @@ const HomeProjectList = () => {
|
||||
if (error) return <p className="text-red-500 text-sm">{error}</p>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className=''>
|
||||
<h2 className="text-lg font-semibold text-font-shade mb-5">Projects</h2>
|
||||
|
||||
{projects.length === 0 ? (
|
||||
|
||||
@@ -34,6 +34,12 @@ export default function TaskCard({ task }: { task: InternTaskItem }) {
|
||||
onClick={() => navigate(`/intern/projects/${task.project_slug}/${task.slug}?type=${task.submission_type}`)}
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="md:hidden mb-[8px]">
|
||||
<span
|
||||
className={`font-semibold text-xs px-2.5 py-1 rounded-md whitespace-nowrap border ${statusStyles[displayStatus]}`}>
|
||||
{statusLabels[displayStatus]}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[11px] text-font mb-1">
|
||||
Deadline : {formatDate(task.deadline_at)} at {formatTime(task.deadline_at)}
|
||||
</div>
|
||||
@@ -48,7 +54,6 @@ export default function TaskCard({ task }: { task: InternTaskItem }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="block md:hidden h-[10px] bg-gray-600" />
|
||||
|
||||
<div className="shrink-0 hidden md:flex items-center border border-card-outline">
|
||||
<span
|
||||
|
||||
@@ -7,8 +7,8 @@ export default function ProjectTimeline({ tasks }: { tasks: InternTaskItem[] })
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
return (
|
||||
<div className="">
|
||||
<div className="flex items-center gap-1.5 mb-1 md:mb-4 justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-1.5 mb-0 md:mb-4 justify-between">
|
||||
<span className="font-semibold text-md text-font-shade">Timeline</span>
|
||||
</div>
|
||||
<ul className="relative pl-4">
|
||||
@@ -19,13 +19,13 @@ export default function ProjectTimeline({ tasks }: { tasks: InternTaskItem[] })
|
||||
const isPast = d < today;
|
||||
const active = isToday || isPast;
|
||||
return (
|
||||
<li key={task.id} className="relative mb-6 list-none">
|
||||
<li key={task.id} className="relative mb-2 list-none">
|
||||
{index < tasks.length - 1 && (
|
||||
<div className="absolute -left-[1.0625rem] top-3 w-px h-full bg-[#ddd]" />
|
||||
)}
|
||||
{/* Dot */}
|
||||
<div
|
||||
className={`absolute -left-5 top-0.5 w-3 h-3 rounded-full border-2 border-white ${
|
||||
className={`absolute -left-[1.45rem] top-0.5 w-3 h-3 rounded-full border-2 border-white ${
|
||||
active ? 'bg-red' : 'bg-gray-400'
|
||||
} ${isToday ? 'shadow-md' : ''}`}
|
||||
/>
|
||||
|
||||
@@ -1,39 +1,40 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { getProjectIcon } from '../../../../lib/ProjectIcons';
|
||||
import type { Project } from '../../../../types/project.types';
|
||||
import { resolveFileUrl } from '../../../../hooks/useUser';
|
||||
|
||||
const ProjectCard = (project: Project) => {
|
||||
const navigate = useNavigate();
|
||||
const Icon = getProjectIcon(project.project_icon);
|
||||
|
||||
|
||||
const tasksDone = project.task_done;
|
||||
const Avatar = resolveFileUrl(project.admin.profile_picture);
|
||||
const tasksDone = project.task_done;
|
||||
const tasksTotal = project.total_tasks;
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={() => navigate(`/intern/projects/${project.slug}`)}
|
||||
className=" rounded-xl overflow-hidden shadow-sm border border-gray-100 w-full flex flex-col cursor-pointer hover:shadow-md transition-shadow duration-200"
|
||||
className="w-[220px] min-h-[320px] flex flex-col bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 cursor-pointer hover:shadow-md transition-shadow duration-200"
|
||||
>
|
||||
{/* Thumbnail */}
|
||||
<div style={{ backgroundColor: project.background_color ?? '#dc2626' }} className="h-[150px] overflow-hidden flex items-center justify-center">
|
||||
<div
|
||||
style={{ backgroundColor: project.background_color ?? '#dc2626' }}
|
||||
className="h-[150px] flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
<Icon className="w-12 h-12 text-white opacity-80" />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="min-h-[180px] max-h-[200px] flex-1 flex flex-col justify-between py-3">
|
||||
<div className="flex flex-col flex-1 justify-between py-3">
|
||||
<div className="px-3 flex flex-col gap-2">
|
||||
{/* Project Name */}
|
||||
<p className="text-xs lg:text-sm font-semibold text-gray-800 leading-tight">
|
||||
<p className="text-sm font-semibold text-gray-800 leading-tight">
|
||||
{project.project_name}
|
||||
</p>
|
||||
|
||||
{/* Mentor */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-6 h-6 rounded-full bg-gray-200 overflow-hidden flex-shrink-0">
|
||||
{project.admin.profile_picture ? (
|
||||
{Avatar ? (
|
||||
<img
|
||||
src={project.admin.profile_picture}
|
||||
src={Avatar}
|
||||
alt={project.admin.full_name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
@@ -44,7 +45,6 @@ const ProjectCard = (project: Project) => {
|
||||
<span className="text-xs text-gray-500 truncate">{project.admin.email}</span>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="w-full h-1.5 bg-gray-200 rounded-full overflow-hidden">
|
||||
<div
|
||||
@@ -58,11 +58,8 @@ const ProjectCard = (project: Project) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Button */}
|
||||
<div className="flex items-end justify-end px-3 pb-1">
|
||||
<button
|
||||
className="bg-red-600 hover:bg-red-700 text-white text-xs font-medium py-1.5 px-3 rounded-xl transition-colors"
|
||||
>
|
||||
<div className="flex items-end justify-end px-3">
|
||||
<button className="bg-red-600 hover:bg-red-700 text-white text-xs font-medium py-1.5 px-3 rounded-xl transition-colors">
|
||||
View Project
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -8,6 +8,9 @@ const TaskTimeline = () => {
|
||||
|
||||
const isOverdue = (dateStr: string) => new Date(dateStr) < today;
|
||||
|
||||
const formatDate = (dateInput: Date | string) =>
|
||||
new Date(dateInput).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
|
||||
|
||||
if (loading) return (
|
||||
<div className="flex flex-col gap-5">
|
||||
{[...Array(3)].map((_, i) => (
|
||||
@@ -19,7 +22,7 @@ const TaskTimeline = () => {
|
||||
if (error) return <p className="text-red-500 text-sm">{error}</p>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className=''>
|
||||
<h2 className="font-semibold text-font-shade mb-5">Timeline Tugas</h2>
|
||||
|
||||
{tasks.length === 0 ? (
|
||||
@@ -50,7 +53,7 @@ const TaskTimeline = () => {
|
||||
|
||||
<div className="flex flex-col gap-0.5 min-w-0">
|
||||
<p className="text-[10px] font-semibold text-font-shade uppercase tracking-widest">
|
||||
{deadlineDate.toLocaleDateString("id-ID")} AT{" "}
|
||||
{formatDate(deadlineDate)} AT{" "}
|
||||
{deadlineDate.toLocaleTimeString("id-ID", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
|
||||
Reference in New Issue
Block a user