validate logout

src/components/ui/DataTable.tsx

@@ -30,7 +30,7 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
+  DialogTrigger
 } from './dialog';
 
 interface DataTableProps<TData, TValue> {
@@ -67,7 +67,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="flex items-center py-4 justify-between">
+      <div className="flex items-center py-4 justify-between w-full">
         <Input
           placeholder="Search"
           value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
@@ -107,18 +107,20 @@ export function DataTable<TData, TValue>({
                     <div className="space-x-2">
                       <button
                         className="btn btn-sm btn-icon btn-clear btn-light"
-                        onClick={() => onUpdate(row.original)}>
+                        onClick={() => onUpdate(row.original)}
+                      >
                         <KeenIcon icon="notepad-edit" />
                       </button>
-                      {
-                        onDelete ? (
-                          <button
+                      {onDelete ? (
+                        <button
                           className="btn btn-sm btn-icon btn-clear btn-light"
-                          onClick={() => onDelete(row.original)}>
+                          onClick={() => onDelete(row.original)}
+                        >
                           <KeenIcon icon="trash" />
                         </button>
-                        ) : ('')
-                      }
+                      ) : (
+                        ''
+                      )}
                     </div>
                   </TableCell>
                 </TableRow>

src/pages/account/manage-account/ManageAccount.tsx

@@ -1,11 +1,11 @@
 import { apiConfig } from '@/config/api.config';
-import { Account, columns } from './Columns';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { getData } from '@/utils';
 import { useCallApi } from '@/hooks';
 import { DataTable } from '@/components/ui/DataTable';
 import { Breadcrumbs, Link } from '@mui/material';
+import { Account, columns } from './Columns';
 
 const API_URL = apiConfig.service_dashboard;
 
@@ -75,7 +75,7 @@ const ManageAccount = () => {
 
   return (
     <div>
-      <div className="container mx-auto p-5">
+      <div className="container mx-auto w-full">
         <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Account</h1>
         <Breadcrumbs>
           <Link underline="none" color="inherit" href="/">

src/pages/groups/ManageGroups.tsx

@@ -182,7 +182,7 @@ const ManageGroups = () => {
           onDelete={handleDelete}
         />
         <Dialog open={isDialogOpen} onClose={closeDialog}>
-          <DialogContent className="w-[600px]">
+          <DialogContent className="w-full">
             <div className="flex justify-between">
               <DialogTitle>Create New Group</DialogTitle>
               <Box display="flex" justifyContent="flex-end">

src/pages/members/kyc/Kyc.tsx

@@ -142,7 +142,7 @@ const Kyc = () => {
 
   return (
     <div>
-      <div className="container mx-auto">
+      <div className="container mx-auto w-full">
         <ConfirmDialog
           open={dialogOpen}
           onClose={() => setDialogOpen(false)}

src/pages/members/manage-members/Columns.tsx

@@ -132,51 +132,51 @@ export const columns: ColumnDef<Members>[] = [
 ];
 
 export const initialMember = {
-  id: "",
-  fullname: "",
-  email: "",
-  username: "",
-  msisdn: "",
-  password: "",
-  pin: "",
-  try_pin: "",
-  mother_fullname: "",
-  agent_name: "",
-  bank_name: "",
-  bank_account: "",
-  ibank_number: "",
-  address: "",
-  longitude: "",
-  latitude: "",
-  nationality: "",
-  photouser: "",
-  photomerchant: "",
-  file_selfie: "",
-  file_document_id: "",
-  file_document_id_selfie: "",
-  file_commercial_license: "",
-  identity_type: "",
-  identity_number: "",
-  license_number: "",
-  date_birth: "",
-  gender: "",
-  status: "N",
-  isneedapproval: "",
-  isapproved: "",
-  approveddate: "",
-  approvedby: "",
-  created_by: "",
-  created_at: "",
-  updated_by: "",
-  updated_at: "",
-  deleted_by: "",
-  deleted_at: "",
-  group: "",
-  point_tier: "",
-  language: "",
-  municipio: "",
-  posto_adms: "",
-  suco: "",
-  aldeia: "",
-  profession: "",
-}
+  id: '',
+  fullname: '',
+  email: '',
+  username: '',
+  msisdn: '',
+  password: '',
+  pin: '',
+  try_pin: '',
+  mother_fullname: '',
+  agent_name: '',
+  bank_name: '',
+  bank_account: '',
+  ibank_number: '',
+  address: '',
+  longitude: '',
+  latitude: '',
+  nationality: '',
+  photouser: '',
+  photomerchant: '',
+  file_selfie: '',
+  file_document_id: '',
+  file_document_id_selfie: '',
+  file_commercial_license: '',
+  identity_type: '',
+  identity_number: '',
+  license_number: '',
+  date_birth: '',
+  gender: '',
+  status: 'N',
+  isneedapproval: '',
+  isapproved: '',
+  approveddate: '',
+  approvedby: '',
+  created_by: '',
+  created_at: '',
+  updated_by: '',
+  updated_at: '',
+  deleted_by: '',
+  deleted_at: '',
+  group: '',
+  point_tier: '',
+  language: '',
+  municipio: '',
+  posto_adms: '',
+  suco: '',
+  aldeia: '',
+  profession: ''
+};

src/pages/members/manage-members/ManageMembers.tsx

@@ -115,7 +115,7 @@ const ManageMembers = () => {
 
   return (
     <div>
-      <div className="container mx-auto p-5">
+      <div className="container mx-auto w-full">
         <ConfirmDialog
           open={dialogOpen}
           onClose={() => setDialogOpen(false)}

src/pages/menu/manage-menu/ManageMenu.tsx

@@ -9,7 +9,7 @@ const ManageMenu = () => {
   return (
     <ManageMenusContextProvider>
       <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Manage Menus</h1>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Menu</h1>
         <Breadcrumbs sx={{ mb: 2 }}>
           <Link underline="none" color="inherit" href="/">
             <span className="text-sm hover:underline">Dashboard</span>
@@ -20,7 +20,7 @@ const ManageMenu = () => {
           </Link>
 
           <Link underline="none" color="inherit">
-            <span className="text-sm">Manage Menus</span>
+            <span className="text-sm">Manage Menu</span>
           </Link>
         </Breadcrumbs>
         <div className="grid gap-5 lg:gap-7.5">

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>
   );
 };