feat(hackathon): change "edit profile" to modal dialog

- Add "edit profile" modal dialog that can be triggered from dashboard
- Update background overlay for dark mode
- Update dark mode for auth callback

apps/hackathon/src/app/auth/callback/page.tsx

@@ -176,13 +176,13 @@ const CallbackPage: FC = (): ReactElement => {
   }
 
   return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50">
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950">
       <div className="text-center">
         <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-        <h2 className="text-xl font-semibold text-gray-900 mb-2">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
           Completing login...
         </h2>
-        <p className="text-gray-600">Please wait</p>
+        <p className="text-gray-600 dark:text-gray-400">Please wait</p>
       </div>
     </div>
   );

apps/hackathon/src/app/dashboard/page.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactElement } from 'react';
+import { FC, ReactElement, useEffect, useState } from 'react';
 import { Link } from 'react-router';
 import {
   useMyTeams,
@@ -9,16 +9,49 @@ import {
 import { toast } from 'sonner';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Icon } from '@iconify/react';
+import ProfilePage from '../profile/page';
+
+type Invitation = {
+  id: string;
+  team: {
+    id?: string;
+    name?: string;
+    logo?: string;
+    banner?: string;
+    description?: string;
+    city?: string;
+    visibility?: string;
+    leader_id?: string;
+  };
+  inviter: {
+    id?: string;
+    fullname?: string;
+    email?: string;
+    avatar?: string;
+  };
+};
 
 const DashboardPage: FC = (): ReactElement => {
   const { session } = useAuthStore();
+  const [showProfileModal, setShowProfileModal] = useState(false);
+  // Lock background scroll when profile modal is open
+  useEffect(() => {
+    if (showProfileModal) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.overflow = originalOverflow || '';
+      };
+    }
+  }, [showProfileModal]);
   const { data: teamsData } = useMyTeams();
   const { data: invitationsData } = useMyInvitations();
   const { mutateAsync: respondToInvitation } = useRespondToInvitation();
 
   const user = session?.user;
   const myTeams = teamsData?.data || [];
-  const invitations = invitationsData?.data || [];
+  const invitations: Invitation[] = (invitationsData?.data ||
+    []) as Invitation[];
 
   const handleAcceptInvitation = async (invitationId: string) => {
     try {
@@ -41,7 +74,8 @@ const DashboardPage: FC = (): ReactElement => {
   };
 
   return (
-    <div className="p-6 md:p-8 md:max-w-7xl w-full mx-auto overflow-hidden">
+    <>
+      <div className="p-6 md:p-8 md:max-w-7xl w-full mx-auto">
         <div className="mb-8">
           <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
             Welcome, {user?.fullname || user?.email?.split('@')[0] || 'User'}!
@@ -67,10 +101,11 @@ const DashboardPage: FC = (): ReactElement => {
                 >
                   <div>
                     <p className="font-medium text-gray-900 dark:text-white">
-                    {invitation.team.name}
+                      {invitation.team?.name ?? 'Unnamed Team'}
                     </p>
                     <p className="text-sm text-gray-600 dark:text-gray-400">
-                    Invited by {invitation.inviter.fullname}
+                      Invited by{' '}
+                      {invitation.inviter?.fullname ?? 'Unknown User'}
                     </p>
                   </div>
                   <div className="flex space-x-2">
@@ -210,12 +245,13 @@ const DashboardPage: FC = (): ReactElement => {
                 </div>
               </div>
               {user?.location && (
-              <Link
+                <button
-                to="/profile"
+                  type="button"
-                className="mt-3 md:mt-14 md:ml-auto inline-flex items-center justify-center px-3 py-1.5 md:px-4 md:py-2 bg-primary-500 text-white rounded-lg text md:text-sm font-medium shadow-sm hover:bg-primary-600 transition-colors w-full md:w-auto"
+                  onClick={() => setShowProfileModal(true)}
+                  className="mt-3 md:mt-14 md:ml-auto inline-flex items-center justify-center px-3 py-1.5 md:px-4 md:py-2 bg-primary-500 text-white rounded-lg text md:text-sm font-medium shadow-sm hover:bg-primary-600 transition-colors w-full md:w-auto cursor-pointer"
                 >
                   Edit Profile
-              </Link>
+                </button>
               )}
             </div>
             <div className="space-y-4 md:space-y-6 w-full max-w-full">
@@ -260,6 +296,11 @@ const DashboardPage: FC = (): ReactElement => {
           </div>
         </div>
       </div>
+      <ProfilePage
+        open={showProfileModal}
+        onClose={() => setShowProfileModal(false)}
+      />
+    </>
   );
 };
 

apps/hackathon/src/app/page.tsx

@@ -187,12 +187,12 @@ export default function HomePage() {
               </button>
             ) : (
               <>
-                <a
+                <button
-                  href="#masuk"
+                  onClick={() => navigate('/auth/login')}
-                  className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white"
+                  className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white cursor-pointer"
                 >
                   Masuk
-                </a>
+                </button>
                 <button
                   onClick={() => navigate('/auth/login')}
                   className="px-4 py-2 bg-primary-500 text-white text-base rounded-lg hover:bg-primary-600 transition-colors text-center cursor-pointer"

apps/hackathon/src/app/profile/page.tsx

@@ -1,7 +1,6 @@
 import { FC, ReactElement, useState, useEffect } from 'react';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate, Link } from 'react-router';
 import { useForm, Controller } from 'react-hook-form';
 import {
   userEditProfileSchema,
@@ -26,8 +25,15 @@ const ROLE_OPTIONS = [
   'Mobile Developer',
 ];
 
-const ProfilePage: FC = (): ReactElement => {
+type ProfileModalProps = {
-  const navigate = useNavigate();
+  open: boolean;
+  onClose: () => void;
+};
+
+const ProfilePage: FC<ProfileModalProps> = ({
+  open,
+  onClose,
+}): ReactElement | null => {
   const [avatarFile, setAvatarFile] = useState<File | null>(null);
   const [avatarPreview, setAvatarPreview] = useState<string>('');
 
@@ -123,8 +129,8 @@ const ProfilePage: FC = (): ReactElement => {
       // Wait a bit for the onSuccess handler to update localStorage
       await new Promise((resolve) => setTimeout(resolve, 100));
 
-      // Navigate back to dashboard
+      // Close modal
-      navigate('/dashboard');
+      onClose();
     } catch (error) {
       console.error('Profile update failed:', error);
       toast.error(
@@ -137,17 +143,20 @@ const ProfilePage: FC = (): ReactElement => {
 
   const isLoading = isUpdating || isUploading;
 
-  return (
+  return open ? (
-    <div className=" bg-black/30 dark:bg-black/50 backdrop-blur-sm flex flex-col justify-center items-center px-4 py-8 z-50 overflow-y-auto">
+    <div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-md z-50 overflow-y-auto">
-      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-xl border dark:boder-gray-800">
+      <div className="min-h-full flex items-center justify-center">
+        <div className="bg-white dark:bg-gray-900 w-full max-w-md mx-4 my-6 sm:my-8 p-8 rounded-xl border dark:boder-gray-800">
           <div className="mb-6">
             <div className="flex items-center justify-between mb-2">
               <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
                 Edit Profile
               </h1>
-            <Link
+              <button
-              to="/dashboard"
+                type="button"
-              className="text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200"
+                onClick={onClose}
+                className="text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200 cursor-pointer"
+                aria-label="Close profile modal"
               >
                 <svg
                   className="w-6 h-6"
@@ -162,7 +171,7 @@ const ProfilePage: FC = (): ReactElement => {
                     d="M6 18L18 6M6 6l12 12"
                   />
                 </svg>
-            </Link>
+              </button>
             </div>
             <p className="text-gray-600 font-sans dark:text-neutral-400">
               Update your photo and name
@@ -177,10 +186,10 @@ const ProfilePage: FC = (): ReactElement => {
                   <img
                     src={avatarPreview}
                     alt="Avatar preview"
-                  className="w-32 h-32 rounded-full object-cover border-4 border-gray-200 dark:border-neutral-700 group-hover:border-blue-400 dark:group-hover:border-blue-500 transition-colors"
+                    className="w-24 h-24 rounded-full object-cover border-4 border-gray-200 dark:border-neutral-700 group-hover:border-blue-400 dark:group-hover:border-blue-500 transition-colors"
                   />
                 ) : (
-                <div className="w-32 h-32 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center group-hover:bg-gray-300 dark:group-hover:bg-gray-600 transition-colors">
+                  <div className="w-24 h-24 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center group-hover:bg-gray-300 dark:group-hover:bg-gray-600 transition-colors">
                     <Icon
                       icon="ic:baseline-person"
                       width="48"
@@ -249,7 +258,7 @@ const ProfilePage: FC = (): ReactElement => {
                 name="location"
                 render={({ field, fieldState }) => (
                   <CitySelect
-                  value={field.value}
+                    value={field.value ?? ''}
                     onChange={field.onChange}
                     error={fieldState.error?.message}
                     placeholder="Search your city..."
@@ -332,7 +341,7 @@ const ProfilePage: FC = (): ReactElement => {
                 type="button"
                 variant="secondary"
                 className="flex-1"
-              onClick={() => navigate('/dashboard')}
+                onClick={onClose}
                 disabled={isLoading}
               >
                 Cancel
@@ -373,7 +382,8 @@ const ProfilePage: FC = (): ReactElement => {
           </form>
         </div>
       </div>
-  );
+    </div>
+  ) : null;
 };
 
 export default ProfilePage;

apps/hackathon/src/app/teams/[teamId]/page.tsx

@@ -194,7 +194,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
         </div>
 
         {/* Loading Overlay */}
-        <div className="fixed inset-0 bg-white/60 flex items-center justify-center z-50">
+        <div className="fixed inset-0 bg-white/60 dark:bg-black/50 flex items-center justify-center z-50">
           <div className="text-center">
             <div className="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
             <p className="mt-4 text-gray-600 dark:text-white">