feat : logout popup

wip : Resend button and timer

src/app/(main)/layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React, { useEffect, useState } from 'react';
-import { Box, Button, Divider, Group, Image, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Divider, Group, Image, Popover, Stack, Text, Title } from '@mantine/core';
 import { IconBook, IconCurrencyRupee, IconHome, IconLogout, IconPhoneFilled, IconSettings } from '@tabler/icons-react';
 import Link from 'next/link';
 import { useRouter, usePathname } from "next/navigation";
@@ -8,6 +8,10 @@ import { Providers } from '../providers';
 import logo from '@/app/image/logo1.jpg';
 import NextImage from 'next/image';
 import { notifications } from '@mantine/notifications';
+import { useDisclosure } from '@mantine/hooks';
+import { Dialog } from '@mantine/core';
+
+
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
     const router = useRouter();
@@ -16,6 +20,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     const [userLastLoginDetails, setUserLastLoginDetails] = useState(null);
     const [custname, setCustname] = useState<string | null>(null);
 
+
+    const [opened, { open, close }] = useDisclosure(false);
+
     function doLogout() {
         localStorage.removeItem("access_token");
         sessionStorage.removeItem("access_token");
@@ -233,9 +240,45 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                                             </Link>
                                         );
                                     })}
-                                    <Button leftSection={<IconLogout size={20} />} variant="subtle" onClick={handleLogout}>
+                                    {/* <Button leftSection={<IconLogout size={20} />} variant="subtle" onClick={handleLogout}>
                                         Logout
-                                    </Button>
+                                    </Button> */}
+                                    <Popover
+                                        opened={opened}
+                                        onChange={close}
+                                        position="bottom-end"   // 👈 Logout button ke niche right align
+                                        withArrow
+                                        shadow="md"
+                                    >
+                                        <Popover.Target>
+                                            <Button
+                                                leftSection={<IconLogout size={20} />}
+                                                variant="subtle"
+                                                onClick={open}
+                                            >
+                                                Logout
+                                            </Button>
+                                        </Popover.Target>
+
+                                        <Popover.Dropdown>
+                                            <Text size="sm" mb="sm">
+                                                Are you sure you want to logout?
+                                            </Text>
+                                            <Group justify="flex-end" gap="sm">
+                                                <Button variant="default" onClick={close}>
+                                                    Cancel
+                                                </Button>
+                                                <Button color="red" onClick={handleLogout}>
+                                                    Logout
+                                                </Button>
+                                            </Group>
+                                        </Popover.Dropdown>
+                                    </Popover>
+
+
+
+
+
                                 </Group>
                             </div>
 
@@ -271,7 +314,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                         </div>
                     </Providers>
                 </body>
-            </html>
+            </html >
         );
     }
 }