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
2025-11-27 15:42:18 +07:00
parent 0fcd93cb7d
commit cd06a71a9e
5 changed files with 479 additions and 428 deletions
@@ -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>
  );
@@ -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
-                to="/profile"
-                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"
+                <button
+                  type="button"
+                  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)}
+      />
+    </>
  );
 };

@@ -187,12 +187,12 @@ export default function HomePage() {
              </button>
            ) : (
              <>
-                <a
-                  href="#masuk"
-                  className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white"
+                <button
+                  onClick={() => navigate('/auth/login')}
+                  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"
@@ -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 => {
-  const navigate = useNavigate();
+type ProfileModalProps = {
+  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
-      navigate('/dashboard');
+      // Close modal
+      onClose();
    } catch (error) {
      console.error('Profile update failed:', error);
      toast.error(
@@ -137,17 +143,20 @@ const ProfilePage: FC = (): ReactElement => {

  const isLoading = isUpdating || isUploading;

-  return (
-    <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="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-xl border dark:boder-gray-800">
+  return open ? (
+    <div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-md z-50 overflow-y-auto">
+      <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
-              to="/dashboard"
-              className="text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200"
+              <button
+                type="button"
+                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;
@@ -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">