Added Logout Option and prefetch for the dashboard

pages/auth/logout.js

@@ -1,8 +1,16 @@
+import { useRouter } from 'next/router'
 import { Typography } from "@mui/material";
 import { Box } from "@mui/system";
 import Button from "@mui/material/Button";
+import LogoutIcon from "@mui/icons-material/Logout";
+import { deleteCookie } from "cookies-next";
 
 export default function Logout() {
+  const router = useRouter()
+  const handleLogout = () => {
+    deleteCookie("cmc-token");
+    router.push("/auth/login")
+  };
   return (
     <>
       <div className="authenticationBox">
@@ -20,51 +28,51 @@ export default function Logout() {
               maxWidth: "510px",
               ml: "auto",
               mr: "auto",
-              textAlign: "center"
+              textAlign: "center",
             }}
             className="bg-black"
           >
             <Box>
-              <img 
-                src="/images/logo.png" 
-                alt="Black logo" 
-                className="black-logo" 
+              <img
+                src="/images/logos/wrenchboard-logo.png"
+                alt="Logo"
+                className="black-logo"
               />
 
-              <img 
-                src="/images/logo-white.png" 
-                alt="White logo" 
-                className="white-logo" 
+              <img
+                src="/images/logos/wrenchboard-logo.png"
+                alt="Logo"
+                className="white-logo"
               />
             </Box>
 
             <Box mt={4} mb={4}>
-              <img src="/images/coffee.png" alt="Coffee" />
+              <LogoutIcon />
             </Box>
 
             <Typography as="h1" fontSize="20px" fontWeight="500" mb={1}>
-              You are Logged Out
-            </Typography>
-
-            <Typography>
-              Thank you for using Admash admin template
+              Would you like to sign out?
             </Typography>
 
             <Button
-              href="/auth/sign-in/"
+              onClick={handleLogout}
               fullWidth
               variant="contained"
               sx={{
                 mt: 3,
+                backgroundColor: "#4687BA",
                 textTransform: "capitalize",
                 borderRadius: "8px",
                 fontWeight: "500",
                 fontSize: "16px",
                 padding: "12px 10px",
-                color: "#fff !important"
+                color: "#fff !important",
+                "&:hover": {
+                  backgroundColor: "rgba(70, 135, 186, 0.8)",
+                },
               }}
             >
-              Sign In
+              Sign Out
             </Button>
           </Box>
         </Box>