feat: enhance user profile update functionality and error handling

- Added detailed error messages for various HTTP status codes in useUpdateProfile hook. - Refactored updateProfile service to handle full_name as separate first and last name fields. - Updated UpdateProfilePayload type to allow profile_picture to be a string or File. - Introduced resolveFileUrl utility function for consistent file URL resolution. - Improved loading and error state management in useUpdateProfile hook. - Added DEFAULT_AVATAR constant for default user avatar.
2026-07-13 12:15:15 +07:00
parent 5516d35546
commit a124a2b96e
39 changed files with 729 additions and 392 deletions
@@ -5,18 +5,12 @@ interface CertificateNotAvailableProps {
  progress: number;
  remainingTasks: number;
  allTasksDone?: boolean;
-  // onClaim: () => void;
-  // claiming: boolean;
-  // claimError: string | null;
 }

 export default function CertificateNotAvailable({
  progress,
  remainingTasks,
  allTasksDone = false,
-  // onClaim,
-  // claiming,
-  // claimError,
 }: CertificateNotAvailableProps) {
  return (
    <div className="bg-box-primary w-full h-full rounded-2xl border border-box-border shadow-sm px-24 py-12 flex flex-col items-center justify-center">
@@ -54,14 +48,6 @@ export default function CertificateNotAvailable({
              <div className="h-full bg-green-500 rounded-full transition-all duration-700 w-full" />
            </div>
          </div>
-          {/* <button
-            onClick={onClaim}
-            disabled={claiming}
-            className="mt-0 px-6 py-2.5 bg-green-600 hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-colors duration-200"
-          >
-            {claiming ? "Memproses..." : "Klaim Sertifikat"}
-          </button>
-          {claimError && <p className="text-red-500 text-sm mt-2">{claimError}</p>} */}
        </>
      ) : (
        <>
@@ -1,16 +1,18 @@
 import { useNavigate } from 'react-router-dom';
 import { useProjects } from '../../../../hooks/useProjects';
 import { getProjectIcon } from '../../../../lib/ProjectIcons';
+import { RiFileList2Fill } from "react-icons/ri";

 const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');

 const HomeProjectList = () => {
  const navigate = useNavigate();
  const { projects, loading, error } = useProjects();
+
  if (loading) return (
    <div className="flex flex-col gap-3">
      {[...Array(3)].map((_, i) => (
-        <div key={i} className="h-16 bg-gray-100 rounded-lg animate-pulse" />
+        <div key={i} className="h-16 bg-gray-100 rounded-lg" />
      ))}
    </div>
  );
@@ -19,27 +21,38 @@ const HomeProjectList = () => {

  return (
    <div>
-      <h2 className="text-lg font-semibold text-font-shade mb-8">Projects</h2>
-      <div className="flex flex-col gap-3 overflow-y-auto max-h-[190px]">
-        {projects.map((project) => (
-          <div
-            key={project.id}
-            onClick={() => navigate(`/intern/projects/${toSlug(project.slug)}`)}
-            className="flex items-center gap-4 border border-card-outline rounded-lg px-4 py-3 hover:bg-gray-50 cursor-pointer transition-colors duration-150"
-          >
-            <div className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style={{ backgroundColor: project.background_color ?? '#dc2626' }}>
-              {(() => {
-                const Icon = getProjectIcon(project.project_icon);
-                return <Icon className="w-5 h-5 text-white" />;
-              })()}
+      <h2 className="text-lg font-semibold text-font-shade mb-5">Projects</h2>
+
+      {projects.length === 0 ? (
+        <div className="flex flex-col items-center justify-center rounded-lg py-2 gap-3">
+          <RiFileList2Fill className="w-12 h-12 text-gray-400" />
+          <p className="text-sm text-gray-400">Kamu belum tergabung ke projek apapun</p>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-3 overflow-y-auto max-h-[190px]">
+          {projects.map((project) => (
+            <div
+              key={project.id}
+              onClick={() => navigate(`/intern/projects/${toSlug(project.slug)}`)}
+              className="flex items-center gap-4 border border-card-outline rounded-lg px-4 py-3 hover:bg-gray-50 cursor-pointer transition-colors duration-150"
+            >
+              <div
+                className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
+                style={{ backgroundColor: project.background_color ?? '#dc2626' }}
+              >
+                {(() => {
+                  const Icon = getProjectIcon(project.project_icon);
+                  return <Icon className="w-5 h-5 text-white" />;
+                })()}
+              </div>
+              <div>
+                <p className="text-sm font-semibold text-font-shade">{project.project_name}</p>
+                <p className="text-xs text-gray-400">{project.status}</p>
+              </div>
            </div>
-            <div>
-              <p className="text-sm font-semibold text-font-shade">{project.project_name}</p>
-              <p className="text-xs text-gray-400">{project.status}</p>
-            </div>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
+      )}
    </div>
  );
 };
@@ -2,6 +2,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import { Award, Settings, HelpCircle, X } from 'lucide-react';
 import { GrHomeRounded } from "react-icons/gr";
 import { MdOutlineAssignment, MdLogout } from "react-icons/md";
+import { HiUser } from "react-icons/hi2";

 const navItems = [
  { label: "Home", icon: GrHomeRounded, path: "/intern" },
@@ -46,12 +47,14 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
      `}
    >
      {/* Brand & Tombol Close untuk Mobile */}
-      <div className="flex items-center justify-between px-2 pb-10">
+      <div className="flex items-center justify-between px-2 pb-6">
        <div className="flex items-center gap-2.5">
-          <div className="w-9 h-9 rounded-[10px] bg-red flex items-center justify-center flex-shrink-0"></div>
+          <div className="w-9 h-9 rounded-[10px] bg-red flex items-center justify-center flex-shrink-0">
+            <HiUser className="w-[18px] h-[18px] text-white"/>
+          </div>
          <div>
-            <p className="text-sm font-bold text-gray-900 leading-tight">Internify</p>
-            <p className="text-[11px] text-gray-400">LMS Portal</p>
+            <p className="text-[19px] font-bold text-font-shade leading-tight">Internify</p>
+            <p className="text-[14px] text-font">LMS Portal</p>
          </div>
        </div>
        <button
@@ -83,10 +86,10 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
        })}
      </nav>

-      <div className="h-px bg-gray-200 my-1" />
+      <div className="h-px bg-gray-300 my-1" />

      {/* Preferences */}
-      <p className="text-[10px] font-semibold tracking-widest text-gray-400 px-3 py-1.5">
+      <p className="text-[10px] font-semibold tracking-widest text-font px-3 py-1.5">
        PREFERENCES
      </p>
      <nav className="flex flex-col gap-0.5">
@@ -1,5 +1,6 @@
 import { useMyTasks } from "../../../../hooks/useProjects";
 import type { InternTaskItem } from "../../../../types/project.types";
+import { RiFileList2Fill } from "react-icons/ri";

 const TaskTimeline = () => {
  const { tasks, loading, error } = useMyTasks();
@@ -20,43 +21,50 @@ const TaskTimeline = () => {
  return (
    <div>
      <h2 className="font-semibold text-font-shade mb-5">Timeline Tugas</h2>
-      <div className="relative overflow-y-auto max-h-[190px]">
-        <ul className="flex flex-col gap-5">
-          {tasks.map((item: InternTaskItem, index) => {
-            const overdue = isOverdue(item.deadline_at);
-            const deadlineDate = new Date(item.deadline_at);
-            const isLast = index === tasks.length - 1;

-            return (
-              <li key={item.id} className="relative flex gap-4 pl-0">
-                {/* Vertical line ke bawah, kecuali item terakhir */}
-                {!isLast && (
-                  <div className="absolute left-[3px] top-3 w-px h-full bg-[#ddd]" />
-                )}
+      {tasks.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-2 gap-3">
+          <RiFileList2Fill className="w-12 h-12 text-gray-400" />
+          <p className="text-sm text-gray-400">Tidak ada tugas saat ini</p>
+        </div>
+      ) : (
+        <div className="relative overflow-y-auto max-h-[190px]">
+          <ul className="flex flex-col gap-5">
+            {tasks.map((item: InternTaskItem, index) => {
+              const overdue = isOverdue(item.deadline_at);
+              const deadlineDate = new Date(item.deadline_at);
+              const isLast = index === tasks.length - 1;

-                <div className="relative flex-shrink-0 mt-1">
-                  <span
-                    className={`block w-3 h-3 rounded-full z-10 relative border-2 right-0.5 border-white ${overdue ? "bg-primary" : "bg-gray-500"
-                      }`}
-                  />
-                </div>
+              return (
+                <li key={item.id} className="relative flex gap-4 pl-0">
+                  {!isLast && (
+                    <div className="absolute left-[3px] top-3 w-px h-full bg-[#ddd]" />
+                  )}

-                <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{" "}
-                    {deadlineDate.toLocaleTimeString("id-ID", {
-                      hour: "2-digit",
-                      minute: "2-digit",
-                    })}
-                  </p>
-                  <p className="text-sm font-semibold text-gray-800">{item.title}</p>
-                  <p className="text-xs text-gray-500">{item.description}</p>
-                </div>
-              </li>
-            );
-          })}
-        </ul>
-      </div>
+                  <div className="relative flex-shrink-0 mt-1">
+                    <span
+                      className={`block w-3 h-3 rounded-full z-10 relative border-2 right-0.5 border-white ${overdue ? "bg-primary" : "bg-gray-500"
+                        }`}
+                    />
+                  </div>
+
+                  <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{" "}
+                      {deadlineDate.toLocaleTimeString("id-ID", {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      })}
+                    </p>
+                    <p className="text-sm font-semibold text-gray-800">{item.title}</p>
+                    <p className="text-xs text-gray-500">{item.description}</p>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )}
    </div>
  );
 };