Merge branch 'dev' into kitchen-order

src/App.tsx

@@ -42,6 +42,7 @@ import ViewGrns from '@/pages/Storekeeper/GrnList';
 import AddGrn from '@/pages/Storekeeper/AddGrn';
 import EditGrn from '@/pages/Storekeeper/EditGrn';
 import KitchenManagerDashboard from '@/pages/KitchenManager/Dashboard';
+import Unauthorized from './components/Unauthorized';
 
 const { refresh } = useAuth();
 
@@ -74,6 +75,15 @@ const routes = createRoutesFromElements(
           </>
         }
       />
+      <Route
+        path="unauthorized"
+        element={
+          <>
+            <PageTitle title="La Fresca | Unauthorized" />
+            <Unauthorized />
+          </>
+        }
+      />
     </Route>
     <Route element={<RequireAuth allowedRoles={['ADMIN']} />}>
       <Route path="/" element={<UserLayout />}>

src/api/useAuth.tsx

@@ -10,6 +10,16 @@ function getRefreshToken() {
     return null;
   }
 }
+
+function getAuthToken() {
+  try {
+    return Cookies.get('_auth');
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}
+
 export const useAuth = () => {
   const refresh = createRefresh({
     interval: 60,
@@ -52,7 +62,7 @@ export const useAuth = () => {
         },
       });
       if (!response.ok) {
-        throw new Error('Failed to add food');
+        throw new Error('Failed to refresh token');
       }
       const json = await response.json();
       console.log('new auth_token: ', json.access_token);
@@ -62,5 +72,24 @@ export const useAuth = () => {
     }
   };
 
-  return { refresh, testRefresh };
+  const signOut = async () => {
+    try {
+      const response = await fetch(`${API_URL}/user/logout`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${getAuthToken()}`,
+        },
+      });
+      if (!response.ok) {
+        throw new Error('Failed to logout');
+      }
+      console.log('Logged out');
+    } catch (error: any) {
+      console.error(error);
+      throw new Error(error);
+    }
+  };
+
+  return { refresh, testRefresh, signOut };
 };

src/components/AuthOutlet.tsx

@@ -8,12 +8,15 @@ interface RequireAuthProps {
 const RequireAuth: React.FC<RequireAuthProps> = ({ allowedRoles }) => {
   const auth = useAuthUser();
   const location = useLocation();
-  return auth != null &&
-    allowedRoles.includes((auth as { role: string }).role) ? (
-    <Outlet />
-  ) : (
-    <Navigate to="/login" state={{ from: location }} replace />
-  );
+
+  if (auth != null && allowedRoles.includes((auth as { role: string }).role)) {
+    return <Outlet />;
+  }
+  if (auth == null) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  } else {
+    return <Navigate to="/unauthorized" replace />;
+  }
 };
 
 export default RequireAuth;

src/components/BranchManager/Header/DropdownUser.tsx

@@ -2,13 +2,15 @@ import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import ClickOutside from '@components/BranchManager/ClickOutside';
 import UserOne from '@images/user/user.png';
+import { useAuth } from '@/api/useAuth';
 import useSignOut from 'react-auth-kit/hooks/useSignOut';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 const DropdownUser = () => {
   const location = useLocation();
   const navigate = useNavigate();
-  const signOut = useSignOut();
+  const { signOut } = useAuth();
+  const clientSignOut = useSignOut();
   const [dropdownOpen, setDropdownOpen] = useState(false);
 
   return (
@@ -125,7 +127,9 @@ const DropdownUser = () => {
           <button
             className="flex items-center gap-3.5 px-6 py-4 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
             onClick={() => {
-              signOut();
+              signOut()?.then(() => {
+                clientSignOut();
+              });
               navigate('/login', { state: { from: location } });
             }}
           >

src/components/Unauthorized.tsx

@@ -0,0 +1,21 @@
+import { Button } from 'flowbite-react';
+import { useNavigate } from 'react-router-dom';
+
+const Unauthorized = () => {
+  const navigate = useNavigate();
+  const goBack = () => navigate(-1);
+
+  return (
+    <div>
+      <h1>Unauthorized</h1>
+      <Button
+        className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg"
+        onClick={goBack}
+      >
+        Bo Back
+      </Button>
+    </div>
+  );
+};
+
+export default Unauthorized;

src/components/User/Header/DropdownUser.tsx

@@ -2,13 +2,15 @@ import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import ClickOutside from '@components/BranchManager/ClickOutside';
 import UserOne from '@images/user/user.png';
+import { useAuth } from '@/api/useAuth';
 import useSignOut from 'react-auth-kit/hooks/useSignOut';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 const DropdownUser = () => {
   const location = useLocation();
   const navigate = useNavigate();
-  const signOut = useSignOut();
+  const { signOut } = useAuth();
+  const clientSignOut = useSignOut();
   const [dropdownOpen, setDropdownOpen] = useState(false);
 
   return (
@@ -125,7 +127,9 @@ const DropdownUser = () => {
           <button
             className="flex items-center gap-3.5 px-6 py-4 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
             onClick={() => {
-              signOut();
+              signOut()?.then(() => {
+                clientSignOut();
+              });
               navigate('/login', { state: { from: location } });
             }}
           >