diff --git a/src/pages/account/home/user-profile/AccountUserProfileContent.tsx b/src/pages/account/home/user-profile/AccountUserProfileContent.tsx index 45cec39..c483fe5 100644 --- a/src/pages/account/home/user-profile/AccountUserProfileContent.tsx +++ b/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 (
@@ -22,7 +25,7 @@ const AccountUserProfileContent = () => { {/* Right Column - MFA Setup */}
- +
diff --git a/src/pages/account/home/user-profile/blocks/GenerateQr.tsx b/src/pages/account/home/user-profile/blocks/GenerateQr.tsx index a656cb0..6d20ea6 100644 --- a/src/pages/account/home/user-profile/blocks/GenerateQr.tsx +++ b/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(null); const [inputToken, setInputToken] = useState(''); const [loading, setLoading] = useState(false); @@ -20,7 +25,7 @@ const GenerateQr = () => { const [error, setError] = useState(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); } }; diff --git a/src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx b/src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx index 3fd9aec..91cca04 100644 --- a/src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx +++ b/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>; } interface SelectedUser { @@ -39,7 +50,9 @@ const initialProps: ContextProps = { handleAddDialog: () => {}, showDeleteDialog: false, handleDeleteDialog: () => {}, - selectedUser: null + selectedUser: null, + showQr: false, + setShowQr: () => {} }; const ManageUserContext = createContext(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(null); const { GetData } = useCallApi(); @@ -165,18 +179,32 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode }) return ( <> - - + + + + + + { + setShowQr(true); + setSelectedUser(row.id); + }} + > + + QR Code + + handleEditDialog(true, row.id)}> + + Edit + + handleDeleteDialog(true, row.id)}> + + Delete + + + ); }, @@ -229,7 +257,9 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode }) showAddDialog, handleAddDialog, showDeleteDialog, - handleDeleteDialog + handleDeleteDialog, + showQr, + setShowQr }} > + + + + + {children}