[skip ci] add setup MFA on my profile

src/pages/account/home/user-profile/AccountUserProfileContent.tsx

@@ -1,18 +1,33 @@
 import { BasicSettings, Password } from './blocks';
+import GenerateQr from './blocks/GenerateQr';
 import { PinCode } from './blocks/PinCode';
 import { AccountUserProfileContextProvider } from './hooks';
 
 const AccountUserProfileContent = () => {
   return (
-    <div className="grid gap-5 lg:gap-7.5 xl:w-[38.75rem] mx-auto">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-red-100 rounded-lg">
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">Account Settings</h1>
+          <p className="text-gray-600">Manage your security preferences and account settings</p>
+        </div>
+
         <AccountUserProfileContextProvider>
-        {/* <BasicSettings /> */}
+          <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
+            {/* Left Column - Security Settings */}
+            <div className="xl:col-span-2 space-y-6">
               <Password />
               <PinCode />
-        {/* Uncomment the line below to enable the Delete Account feature */}
-        {/* <DeleteAccount /> */}
+            </div>
+
+            {/* Right Column - MFA Setup */}
+            <div className="xl:col-span-1">
+              <GenerateQr />
+            </div>
+          </div>
         </AccountUserProfileContextProvider>
       </div>
+    </div>
   );
 };
 

src/pages/account/home/user-profile/blocks/GenerateQr.tsx

@@ -0,0 +1,219 @@
+import { getAuth } from '@/auth';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { RefreshCw, Shield, Smartphone, QrCode } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import clsx from 'clsx';
+
+const API_URL = apiConfig.service_dashboard;
+
+const GenerateQr = () => {
+  const { GetData, PostData } = useCallApi();
+  const parsedUser = getAuth()?.user;
+  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);
+  const [inputToken, setInputToken] = useState('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const getQrCode = async () => {
+    if (!parsedUser?.id) {
+      toast.error('User ID not found');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await GetData(`${API_URL}/user/generate_mfa/${parsedUser.id}`, {});
+      if (response?.status) {
+        setQrCodeUrl(response.data.token_base64);
+        toast.success('QR Code generated successfully');
+      } else {
+        setError('QR Code not found');
+        toast.error(response?.message);
+      }
+    } catch (error) {
+      toast.error('Something went wrong, please try again');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const verifyToken = async () => {
+    if (!parsedUser?.id) {
+      toast.error('User ID not found');
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await PostData(`${API_URL}/user/verify_mfa`, {
+        id: parsedUser.id,
+        token: inputToken
+      });
+
+      if (response?.status) {
+        toast.success('Token verified successfully');
+        setInputToken('');
+      } else {
+        toast.error(response?.message);
+      }
+    } catch (error) {
+      toast.error('Something went wrong, please try again');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition-shadow duration-300 h-fit">
+      <div className="bg-gradient-to-r from-red-600 to-pink-600 px-6 py-4">
+        <div className="flex items-center space-x-3">
+          <div className="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center">
+            <Shield className="text-white w-4 h-4" />
+          </div>
+          <h3 className="text-xl font-semibold text-white">Multi-Factor Authentication</h3>
+        </div>
+      </div>
+
+      <div className="p-6">
+        {!qrCodeUrl ? (
+          // Initial Setup State
+          <div className="text-center space-y-6">
+            <div className="w-16 h-16 bg-red-100 rounded-2xl flex items-center justify-center mx-auto">
+              <Smartphone className="w-8 h-8 text-red-600" />
+            </div>
+
+            <div className="space-y-2">
+              <h4 className="text-lg font-semibold text-gray-900">Secure Your Account</h4>
+              <p className="text-gray-600 text-sm leading-relaxed">
+                Add an extra layer of security to your account with multi-factor authentication
+                using your mobile device.
+              </p>
+            </div>
+
+            <div className="bg-gradient-to-r from-red-50 to-pink-50 rounded-xl p-4 border border-red-100">
+              <div className="flex items-start space-x-3">
+                <div className="w-6 h-6 bg-red-600 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                  <span className="text-white text-xs font-bold">1</span>
+                </div>
+                <div className="text-left">
+                  <p className="text-sm font-medium text-gray-900">Download an authenticator app</p>
+                  <p className="text-xs text-gray-600 mt-1">
+                    Google Authenticator{' '}
+                    <a
+                      href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"
+                      target="_blank"
+                      className="underline text-red-400 hover:text-red-500"
+                    >
+                      click here
+                    </a>
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <button
+              onClick={getQrCode}
+              disabled={loading}
+              className={clsx(
+                'w-full py-3 px-6 rounded-xl font-medium transition-all duration-200 flex items-center justify-center space-x-2',
+                loading
+                  ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                  : 'bg-gradient-to-r from-red-600 to-pink-600 text-white hover:from-red-700 hover:to-pink-700 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5'
+              )}
+            >
+              {loading ? (
+                <>
+                  <div className="w-5 h-5 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin"></div>
+                  <span>Generating QR Code...</span>
+                </>
+              ) : (
+                <>
+                  <QrCode className="w-5 h-5" />
+                  <span>Setup Multi-Factor Authentication</span>
+                </>
+              )}
+            </button>
+          </div>
+        ) : (
+          // QR Code Generated State
+          <div className="space-y-6">
+            <div className="text-center space-y-4">
+              <div className="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto">
+                <QrCode className="w-8 h-8 text-green-600" />
+              </div>
+
+              <div className="space-y-2">
+                <h4 className="text-lg font-semibold text-gray-900">Scan QR Code</h4>
+                <p className="text-gray-600 text-sm">
+                  Open your authenticator app and scan this QR code
+                </p>
+              </div>
+            </div>
+
+            <div className="flex justify-center">
+              <div className="bg-white rounded-2xl p-4 shadow-lg border-2 border-gray-100">
+                <img src={qrCodeUrl} alt="QR Code MFA" className="w-48 h-48 rounded-xl" />
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <label className="block text-sm font-medium text-gray-700">Verification Code</label>
+                <input
+                  type="text"
+                  className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all duration-200 text-center text-lg tracking-widest"
+                  placeholder="000000"
+                  value={inputToken}
+                  onChange={(e) => setInputToken(e.target.value.replace(/\D/g, '').slice(0, 6))}
+                  maxLength={6}
+                />
+                <p className="text-xs text-gray-500">
+                  Enter the 6-digit code from your authenticator app
+                </p>
+              </div>
+
+              <button
+                onClick={verifyToken}
+                disabled={isSubmitting || inputToken.length !== 6}
+                className={clsx(
+                  'w-full py-3 px-6 rounded-xl font-medium transition-all duration-200 flex items-center justify-center space-x-2',
+                  isSubmitting || inputToken.length !== 6
+                    ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                    : 'bg-gradient-to-r from-red-600 to-orange-600 text-white hover:from-red-700 hover:to-orange-700 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5'
+                )}
+              >
+                {isSubmitting ? (
+                  <>
+                    <RefreshCw className="w-5 h-5 animate-spin" />
+                    <span>Verifying...</span>
+                  </>
+                ) : (
+                  <>
+                    <Shield className="w-5 h-5" />
+                    <span>Verify & Enable MFA</span>
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {error && (
+          <div className="mt-4 p-3 bg-red-50 rounded-lg border border-red-200">
+            <p className="text-sm text-red-600 text-center">{error}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default GenerateQr;

src/pages/account/home/user-profile/blocks/Password.tsx

@@ -6,6 +6,7 @@ import { KeenIcon } from '@/components';
 import clsx from 'clsx';
 
 type PasswordType = 'password' | 'retype_password' | 'current_password';
+
 const Password = () => {
   const { setPassword } = useContext(AccountUserProfileContext);
   const { getUser } = useAuthContext();
@@ -93,103 +94,139 @@ const Password = () => {
   }, []);
 
   return (
-    <div className="card pb-2.5">
-      <div className="card-header" id="password_settings">
-        <h3 className="card-title">Password</h3>
+    <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+      <div className="px-6 py-4 border-b border-gray-100">
+        <h3 className="text-lg font-medium text-gray-900">Change Password</h3>
+        <p className="text-sm text-gray-500 mt-1">
+          Update your password to keep your account secure
+        </p>
       </div>
-      <div className="card-body grid gap-5">
-        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-          <label className="form-label max-w-56">Current Password</label>
-          <div className="input">
+
+      <div className="p-6 space-y-6">
+        {/* Current Password */}
+        <div className="space-y-2">
+          <label className="block text-sm font-medium text-gray-700">Current Password</label>
+          <div className="relative">
             <input
               type={showPassword.current_password ? 'text' : 'password'}
-              className="form-control"
-              placeholder="Current password"
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors"
+              placeholder="Enter your current password"
               value={currentPassword}
               onChange={(e) => setCurrentPassword(e.target.value)}
               disabled={isSubmitting}
             />
-            <button className="btn btn-icon" onClick={(e) => togglePassword(e, 'current_password')}>
+            <button
+              type="button"
+              className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+              onClick={(e) => togglePassword(e, 'current_password')}
+            >
               <KeenIcon
-                icon="eye"
-                className={clsx('text-gray-500', { hidden: showPassword.current_password })}
-              />
-              <KeenIcon
-                icon="eye-slash"
-                className={clsx('text-gray-500', { hidden: !showPassword.current_password })}
+                icon={showPassword.current_password ? 'eye-slash' : 'eye'}
+                className="w-4 h-4"
               />
             </button>
           </div>
         </div>
-        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-          <label className="form-label max-w-56">New Password</label>
-          <div className="input">
+
+        {/* New Password */}
+        <div className="space-y-2">
+          <label className="block text-sm font-medium text-gray-700">New Password</label>
+          <div className="relative">
             <input
-              className="form-control"
-              placeholder="New password"
+              type={showPassword.password ? 'text' : 'password'}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors"
+              placeholder="Enter your new password"
               value={newPassword}
               onChange={(e) => setNewPassword(e.target.value)}
               disabled={isSubmitting}
-              type={showPassword.password ? 'text' : 'password'}
-            />
-            <button className="btn btn-icon" onClick={(e) => togglePassword(e, 'password')}>
-              <KeenIcon
-                icon="eye"
-                className={clsx('text-gray-500', { hidden: showPassword.password })}
-              />
-              <KeenIcon
-                icon="eye-slash"
-                className={clsx('text-gray-500', { hidden: !showPassword.password })}
             />
+            <button
+              type="button"
+              className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+              onClick={(e) => togglePassword(e, 'password')}
+            >
+              <KeenIcon icon={showPassword.password ? 'eye-slash' : 'eye'} className="w-4 h-4" />
             </button>
           </div>
         </div>
-        <div className="mb-2.5">
-          <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-            <label className="form-label max-w-56">Confirm New Password</label>
-            <div className="input">
+
+        {/* Confirm Password */}
+        <div className="space-y-2">
+          <label className="block text-sm font-medium text-gray-700">Confirm New Password</label>
+          <div className="relative">
             <input
               type={showPassword.retype_password ? 'text' : 'password'}
-                className="form-control"
-                placeholder="Confirm new password"
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors"
+              placeholder="Confirm your new password"
               value={confirmPassword}
               onChange={(e) => setConfirmPassword(e.target.value)}
               disabled={isSubmitting}
             />
             <button
-                className="btn btn-icon"
+              type="button"
+              className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
               onClick={(e) => togglePassword(e, 'retype_password')}
             >
               <KeenIcon
-                  icon="eye"
-                  className={clsx('text-gray-500', { hidden: showPassword.retype_password })}
-                />
-                <KeenIcon
-                  icon="eye-slash"
-                  className={clsx('text-gray-500', { hidden: !showPassword.retype_password })}
+                icon={showPassword.retype_password ? 'eye-slash' : 'eye'}
+                className="w-4 h-4"
               />
             </button>
           </div>
-          </div>
-          <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-            <label className="form-label max-w-56 text-white">Confirm New Password</label>
+
+          {/* Password Requirements */}
           {passwordErrors.length > 0 && (
-              <div className="text-xs text-red-500 mt-1 ms-3">
+            <div className="mt-2 space-y-1">
               {passwordErrors.map((error, index) => (
-                  <p key={index}>{error}</p>
+                <p key={index} className="text-xs text-red-600 flex items-center">
+                  <span className="w-1 h-1 bg-red-600 rounded-full mr-2"></span>
+                  {error}
+                </p>
               ))}
             </div>
           )}
         </div>
-        </div>
 
-        <div className="flex justify-end">
+        {/* Submit Button */}
+        <div className="pt-4">
           <button
-            className="btn btn-primary"
+            type="button"
+            className={clsx(
+              'w-full py-2.5 px-4 rounded-md font-medium transition-all duration-200',
+              isButtonDisabled
+                ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                : 'bg-red-600 text-white hover:bg-red-800 active:bg-red-900'
+            )}
             onClick={handleResetPassword}
             disabled={isButtonDisabled}
           >
-            {isSubmitting ? 'Updating...' : 'Update Password'}
+            {isSubmitting ? (
+              <span className="flex items-center justify-center">
+                <svg
+                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+                Updating Password...
+              </span>
+            ) : (
+              'Update Password'
+            )}
           </button>
         </div>
       </div>

src/pages/account/home/user-profile/blocks/PinCode.tsx

@@ -2,6 +2,7 @@ import { useState, useContext, useCallback, MouseEvent } from 'react';
 import { AccountUserProfileContext } from '../hooks';
 import { toast } from 'sonner';
 import { KeenIcon } from '@/components';
+import clsx from 'clsx';
 
 type PasswordType = 'current' | 'new' | 'retype';
 
@@ -16,12 +17,12 @@ const PinCode = () => {
   const [showPassword, setShowPassword] = useState({
     current: false,
     new: false,
-    retype: false,
+    retype: false
   });
 
   // Fungsi hanya angka, maksimal 6 digit
   const handleNumericInput = (value: string) => {
-    return value.replace(/\D/g, '').slice(0, 100);
+    return value.replace(/\D/g, '').slice(0, 6);
   };
 
   const handleResetPassword = useCallback(async () => {
@@ -37,7 +38,7 @@ const PinCode = () => {
       await setPincode({
         currentpincode: currentPincode,
         newpincode: newPincode,
-        retypepincode: retypePincode,
+        retypepincode: retypePincode
       });
 
       setCurrentPincode('');
@@ -57,13 +58,10 @@ const PinCode = () => {
 
   const isButtonDisabled = isSubmitting || !currentPincode || !newPincode || !retypePincode;
 
-  const togglePassword = useCallback(
-    (event: MouseEvent<HTMLButtonElement>, key: PasswordType) => {
+  const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: PasswordType) => {
     event.preventDefault();
     setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
-    },
-    []
-  );
+  }, []);
 
   const handleRetypeChange = (value: string) => {
     const numericValue = handleNumericInput(value);
@@ -76,105 +74,146 @@ const PinCode = () => {
   };
 
   return (
-    <div className="card pb-2.5">
-      <div className="card-header" id="password_settings">
-        <h3 className="card-title">Pin Code</h3>
+    <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+      <div className="px-6 py-4 border-b border-gray-100">
+        <h3 className="text-lg font-medium text-gray-900">Change Pin Code</h3>
+        <p className="text-sm text-gray-500 mt-1">
+          Update your 6-digit pin code for additional security
+        </p>
       </div>
-      <div className="card-body grid gap-5">
+
+      <div className="p-6 space-y-6">
         {/* Current Pin Code */}
-        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-          <label className="form-label max-w-56">Current Pin Code</label>
-          <div className="input relative">
+        <div className="space-y-2">
+          <label className="block text-sm font-medium text-gray-700">Current Pin Code</label>
+          <div className="relative">
             <input
-              className="form-control pr-10"
-              placeholder="Current Pin Code"
+              type={showPassword.current ? 'text' : 'password'}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors text-center text-lg tracking-widest"
+              placeholder="• • • • • •"
               value={currentPincode}
               onChange={(e) => setCurrentPincode(handleNumericInput(e.target.value))}
               disabled={isSubmitting}
-              type={showPassword.current ? 'text' : 'password'}
+              maxLength={6}
             />
             <button
-              className="btn btn-icon absolute right-2 top-1/2 transform -translate-y-1/2"
-              onClick={(e) => togglePassword(e, 'current')}
               type="button"
+              className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+              onClick={(e) => togglePassword(e, 'current')}
             >
-              <KeenIcon
-                icon={showPassword.current ? 'eye-slash' : 'eye'}
-                className="text-gray-500"
-              />
+              <KeenIcon icon={showPassword.current ? 'eye-slash' : 'eye'} className="w-4 h-4" />
             </button>
           </div>
         </div>
 
         {/* New Pin Code */}
-        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-          <label className="form-label max-w-56">New Pin Code</label>
-          <div className="input relative">
+        <div className="space-y-2">
+          <label className="block text-sm font-medium text-gray-700">New Pin Code</label>
+          <div className="relative">
             <input
-              className="form-control pr-10"
-              placeholder="New Pin Code"
+              type={showPassword.new ? 'text' : 'password'}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors text-center text-lg tracking-widest"
+              placeholder="• • • • • •"
               value={newPincode}
               onChange={(e) => {
                 const value = handleNumericInput(e.target.value);
                 setNewPincode(value);
                 if (retypePincode) {
-                  setErrorRetype(value !== retypePincode ? 'New Pin Code and Retype Pin Code do not match.' : '');
+                  setErrorRetype(
+                    value !== retypePincode ? 'New Pin Code and Retype Pin Code do not match.' : ''
+                  );
                 }
               }}
               disabled={isSubmitting}
-              type={showPassword.new ? 'text' : 'password'}
+              maxLength={6}
             />
             <button
-              className="btn btn-icon absolute right-2 top-1/2 transform -translate-y-1/2"
-              onClick={(e) => togglePassword(e, 'new')}
               type="button"
+              className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+              onClick={(e) => togglePassword(e, 'new')}
             >
-              <KeenIcon
-                icon={showPassword.new ? 'eye-slash' : 'eye'}
-                className="text-gray-500"
-              />
+              <KeenIcon icon={showPassword.new ? 'eye-slash' : 'eye'} className="w-4 h-4" />
             </button>
           </div>
+          <p className="text-xs text-gray-500">Enter 6 digits only</p>
         </div>
 
         {/* Retype Pin Code */}
-        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-          <label className="form-label max-w-56">Retype Pin Code</label>
-          <div className="input relative w-full">
+        <div className="space-y-2">
+          <label className="block text-sm font-medium text-gray-700">Confirm New Pin Code</label>
+          <div className="relative">
             <input
-              className={`form-control pr-10 ${errorRetype ? 'border-red-500' : ''}`}
-              placeholder="Retype Pin Code"
+              type={showPassword.retype ? 'text' : 'password'}
+              className={clsx(
+                'w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:border-transparent transition-colors text-center text-lg tracking-widest',
+                errorRetype
+                  ? 'border-red-300 focus:ring-red-500'
+                  : 'border-gray-300 focus:ring-red-500'
+              )}
+              placeholder="• • • • • •"
               value={retypePincode}
               onChange={(e) => handleRetypeChange(e.target.value)}
               disabled={isSubmitting}
-              type={showPassword.retype ? 'text' : 'password'}
+              maxLength={6}
             />
             <button
-              className="btn btn-icon absolute right-2 top-1/2 transform -translate-y-1/2"
-              onClick={(e) => togglePassword(e, 'retype')}
               type="button"
+              className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+              onClick={(e) => togglePassword(e, 'retype')}
             >
-              <KeenIcon
-                icon={showPassword.retype ? 'eye-slash' : 'eye'}
-                className="text-gray-500"
-              />
+              <KeenIcon icon={showPassword.retype ? 'eye-slash' : 'eye'} className="w-4 h-4" />
             </button>
           </div>
+
+          {/* Error message */}
+          {errorRetype && (
+            <p className="text-xs text-red-600 flex items-center mt-1">
+              <span className="w-1 h-1 bg-red-600 rounded-full mr-2"></span>
+              {errorRetype}
+            </p>
+          )}
         </div>
 
-        {/* Error message under Retype */}
-        {errorRetype && (
-          <div className="text-red-500 text-sm -mt-4 ml-[calc(14rem+10px)]">{errorRetype}</div>
-        )}
-
-        {/* Submit button */}
-        <div className="flex justify-end">
+        {/* Submit Button */}
+        <div className="pt-4">
           <button
-            className="btn btn-primary"
+            type="button"
+            className={clsx(
+              'w-full py-2.5 px-4 rounded-md font-medium transition-all duration-200',
+              isButtonDisabled
+                ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                : 'bg-red-600 text-white hover:bg-red-800 active:bg-red-900'
+            )}
             onClick={handleResetPassword}
             disabled={isButtonDisabled}
           >
-            {isSubmitting ? 'Updating...' : 'Update Pin Code'}
+            {isSubmitting ? (
+              <span className="flex items-center justify-center">
+                <svg
+                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+                Updating Pin Code...
+              </span>
+            ) : (
+              'Update Pin Code'
+            )}
           </button>
         </div>
       </div>

src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx

@@ -188,44 +188,50 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
     [handleEditDialog, handleDeleteDialog]
   );
 
+  // Fungsi helper untuk mengumpulkan semua parent nodes
+  const collectParents = (data: any[]) => {
+    const parentsList: any[] = [];
+
+    const traverse = (items: any[]) => {
+      items.forEach((item) => {
+        // Jika item memiliki children, maka dia adalah parent
+        if (item.children && item.children.length > 0) {
+          if (!parentsList.find((p) => p.id === item.id)) {
+            parentsList.push({ id: item.id, name: item.name });
+          }
+          // Rekursi untuk children
+          traverse(item.children);
+        }
+      });
+    };
+
+    traverse(data);
+    return parentsList;
+  };
+
   const flattenChildren = (parent: any, parentIdx: number, depth = 0, parentName = '') => {
     let result: any[] = [];
 
-    if (parent.id_parent === null) {
-      if (!parents.find((el: any) => el.id === parent.id))
-        setParents((el: any) => [...el, { id: parent.id, name: parent.name }]);
-
+    // Selalu tambahkan item saat ini ke result (baik parent maupun child)
     result.push({
       id: parent.id,
       module: parent.module,
-        parentName: parentName || parent.name,
+      parentName: parentName,
       name: parent.name,
       link: parent.link,
       id_parent: parent.id_parent,
       status: parent.status,
       order_number: parent.order_number
     });
-    }
 
+    // Jika tidak ada children, return result
     if (!parent.children || parent.children.length === 0) {
       return result;
     }
 
+    // Proses children secara rekursif
     const childrenFlattened = parent.children.flatMap((child: any, childIdx: number) => {
-      if (child.children && child.children.length > 0) {
-        return flattenChildren(child, parentIdx * 100 + childIdx, depth + 1, child.name);
-      }
-
-      return {
-        id: child.id,
-        module: parent.module,
-        parentName: parentName || parent.name,
-        name: child.name,
-        link: child.link,
-        id_parent: child.id_parent,
-        status: child.status,
-        order_number: parent.order_number
-      };
+      return flattenChildren(child, parentIdx * 100 + childIdx, depth + 1, parent.name);
     });
 
     return [...result, ...childrenFlattened];
@@ -237,7 +243,7 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
       filter = filter.length === 0 ? {} : { name: { like: `%${filter[0].value?.toLowerCase()}%` } };
 
       const query: any = {
-        limit:100,
+        limit: 100,
         page: 1,
         with_deleted: false,
         order_field: sorting[0].id,
@@ -254,15 +260,22 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
       if (query.filter && query.filter.length > 0) {
         return { data: response?.data.list, totalCount: response?.data.total_count };
       } else {
+        // Reset parents array
+        setParents([]);
+
+        // Kumpulkan semua parents terlebih dahulu
+        const allParents = collectParents(response?.data.list || []);
+        setParents(allParents);
+
+        // Transform data dengan flatten
         const transformedData = response?.data.list.flatMap((row: any, parentIdx: number) =>
           flattenChildren(row, parentIdx)
         );
 
         const total_count = transformedData.length;
 
-        // **Pagination di frontend saja (tanpa hit API ulang)**
+        // Pagination di frontend
         const paginatedData = transformedData.slice(page * limit, (page + 1) * limit);
-        const totalPages = Math.ceil(total_count / limit);
 
         return { data: paginatedData, totalCount: total_count };
       }