feat: add mfa on manage user

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

@@ -1,9 +1,12 @@
+import { getAuth } from '@/auth';
 import { BasicSettings, Password } from './blocks';
 import GenerateQr from './blocks/GenerateQr';
 import { PinCode } from './blocks/PinCode';
 import { AccountUserProfileContextProvider } from './hooks';
 
 const AccountUserProfileContent = () => {
+  const parsedUser = getAuth()?.user;
+
   return (
     <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">
@@ -22,7 +25,7 @@ const AccountUserProfileContent = () => {
 
             {/* Right Column - MFA Setup */}
             <div className="xl:col-span-1">
-              <GenerateQr />
+              <GenerateQr idCustomer={parsedUser.id} />
             </div>
           </div>
         </AccountUserProfileContextProvider>

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

@@ -7,12 +7,17 @@ import { RefreshCw, Shield, Smartphone, QrCode } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
 import clsx from 'clsx';
+import { useUserContext } from '@/pages/settings/user/manage-user/hooks';
 
 const API_URL = apiConfig.service_dashboard;
 
-const GenerateQr = () => {
+type QrProps = {
+  idCustomer: string | null;
+};
+
+const GenerateQr = ({ idCustomer }: QrProps) => {
   const { GetData, PostData } = useCallApi();
-  const parsedUser = getAuth()?.user;
+  const { setShowQr } = useUserContext();
   const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);
   const [inputToken, setInputToken] = useState('');
   const [loading, setLoading] = useState<boolean>(false);
@@ -20,7 +25,7 @@ const GenerateQr = () => {
   const [error, setError] = useState<string | null>(null);
 
   const getQrCode = async () => {
-    if (!parsedUser?.id) {
+    if (!idCustomer) {
       toast.error('User ID not found');
       return;
     }
@@ -29,7 +34,7 @@ const GenerateQr = () => {
     setError(null);
 
     try {
-      const response = await GetData(`${API_URL}/user/generate_mfa/${parsedUser.id}`, {});
+      const response = await GetData(`${API_URL}/user/generate_mfa/${idCustomer}`, {});
       if (response?.status) {
         setQrCodeUrl(response.data.token_base64);
         toast.success('QR Code generated successfully');
@@ -45,7 +50,7 @@ const GenerateQr = () => {
   };
 
   const verifyToken = async () => {
-    if (!parsedUser?.id) {
+    if (!idCustomer) {
       toast.error('User ID not found');
       return;
     }
@@ -54,7 +59,7 @@ const GenerateQr = () => {
 
     try {
       const response = await PostData(`${API_URL}/user/verify_mfa`, {
-        id: parsedUser.id,
+        id: idCustomer,
         token: inputToken
       });
 
@@ -69,6 +74,7 @@ const GenerateQr = () => {
     } finally {
       setIsSubmitting(false);
       setQrCodeUrl(null);
+      setShowQr(false);
     }
   };
 

src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx

@@ -6,6 +6,15 @@ import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
 import { EnforceSwitch } from '@/components/switch';
 import { ListToolBar } from '../blocks';
 import { useCallApi } from '@/hooks';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+import { MoreHorizontal, MoreVertical, Pencil, QrCode, Trash } from 'lucide-react';
+import GenerateQr from '@/pages/account/home/user-profile/blocks/GenerateQr';
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
 
 interface ContextProps {
   showSearchDialog: boolean;
@@ -17,6 +26,8 @@ interface ContextProps {
   showDeleteDialog: boolean;
   handleDeleteDialog: (show: boolean, selected_user: string | null) => void;
   selectedUser: string | null;
+  showQr: boolean;
+  setShowQr: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 interface SelectedUser {
@@ -39,7 +50,9 @@ const initialProps: ContextProps = {
   handleAddDialog: () => {},
   showDeleteDialog: false,
   handleDeleteDialog: () => {},
-  selectedUser: null
+  selectedUser: null,
+  showQr: false,
+  setShowQr: () => {}
 };
 
 const ManageUserContext = createContext<ContextProps>(initialProps);
@@ -52,6 +65,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
   const [showSearchDialog, setShowSearchDialog] = useState(false);
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [showQr, setShowQr] = useState(false);
   const [selectedUser, setSelectedUser] = useState<string | null>(null);
   const { GetData } = useCallApi();
 
@@ -165,18 +179,32 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
 
           return (
             <>
-              <button
-                className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleEditDialog(true, row.id)}
-              >
-                <KeenIcon icon="notepad-edit" />
-              </button>
-              <button
-                className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleDeleteDialog(true, row.id)}
-              >
-                <KeenIcon icon="trash" />
-              </button>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button className="btn btn-sm btn-icon btn-light">
+                    <MoreHorizontal className="w-4 h-4" />
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-48">
+                  <DropdownMenuItem
+                    onClick={() => {
+                      setShowQr(true);
+                      setSelectedUser(row.id);
+                    }}
+                  >
+                    <QrCode className="w-4 h-4 mr-2" />
+                    QR Code
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => handleEditDialog(true, row.id)}>
+                    <Pencil className="w-4 h-4 mr-2" />
+                    Edit
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => handleDeleteDialog(true, row.id)}>
+                    <Trash className="w-4 h-4 mr-2 text-red-500" />
+                    <span className="text-red-500">Delete</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
             </>
           );
         },
@@ -229,7 +257,9 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
         showAddDialog,
         handleAddDialog,
         showDeleteDialog,
-        handleDeleteDialog
+        handleDeleteDialog,
+        showQr,
+        setShowQr
       }}
     >
       <DataGridProvider
@@ -243,6 +273,11 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
           doGetListData(pageIndex, pageSize, sorting, columnFilters)
         }
       >
+        <Dialog open={showQr} onOpenChange={setShowQr}>
+          <DialogContent>
+            <GenerateQr idCustomer={selectedUser} />
+          </DialogContent>
+        </Dialog>
         {children}
       </DataGridProvider>
     </ManageUserContext.Provider>