validate logout

src/partials/dropdowns/user/DropdownUser.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import { getAuth, useAuthContext } from '@/auth';
@@ -15,6 +15,8 @@ import {
   MenuArrow,
   MenuIcon
 } from '@/components/menu';
+import { Alert, Button, Dialog, DialogContent } from '@mui/material';
+import { DialogFooter, DialogHeader } from '@/components/ui/dialog';
 
 interface IDropdownUserProps {
   menuItemRef: any;
@@ -26,6 +28,12 @@ interface IDropdownUserProps {
 
 const DropdownUser = ({ menuItemRef }: IDropdownUserProps) => {
   const { logout, auth } = useAuthContext();
+  const [showLogoutDialog, setShowLogoutDialog] = useState(false);
+
+  const handleLogout = () => {
+    setShowLogoutDialog(false); // Tutup dialog
+    logout(); // Panggil fungsi logout
+  };
 
   const buildHeader = () => {
     return (
@@ -73,7 +81,10 @@ const DropdownUser = ({ menuItemRef }: IDropdownUserProps) => {
     return (
       <div className="flex flex-col">
         <div className="menu-item px-4 py-1.5">
-          <a onClick={logout} className="btn btn-sm btn-light justify-center">
+          <a
+            onClick={() => setShowLogoutDialog(true)}
+            className="btn btn-sm btn-light justify-center"
+          >
             <FormattedMessage id="USER.MENU.LOGOUT" />
           </a>
         </div>
@@ -89,6 +100,25 @@ const DropdownUser = ({ menuItemRef }: IDropdownUserProps) => {
       {buildHeader()}
       {buildMenu()}
       {buildFooter()}
+
+      <Dialog open={showLogoutDialog} onClose={(open) => setShowLogoutDialog(false)}>
+        <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
+          <DialogHeader className="p-0 border-0 block">
+            <Alert severity="warning" variant="filled">
+              <h3 className="text-lg">Are you sure?</h3>
+              <span className="text-sm">You are about to log out!</span>
+            </Alert>
+          </DialogHeader>
+          <DialogFooter className="flex justify-end items-center gap-4 mt-3">
+            <Button variant={'outlined'} onClick={() => setShowLogoutDialog(false)}>
+              Cancel
+            </Button>
+            <Button variant="outlined" color="error" onClick={handleLogout}>
+              Logout
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </MenuSub>
   );
 };