change structure socket and add permission

src/app/(withAuth)/(dashboardLayout)/layout.js

@@ -1,16 +1,23 @@
+"use client";
 import HeaderWithSidebar from "@/components/layouts/dashboard/headerWithSidebar";
 import CallWidget from "@/components/widget/call";
 import WithWidgetMiddleware from "@/core/middlewares/withWidget";
 import { SocketProvider } from "@/lib/contexts/socket";
+import { usePermissions } from "@/lib/hooks/usePermissions";
 import { Stack } from "@mui/material";
 
 const Layout = ({ children }) => {
+  const { data: permissions } = usePermissions();
+  const isCallWidgetEnabled = permissions?.some(
+    (permission) => permission === "manage_calls"
+  );
+
   return (
     <SocketProvider>
       <Stack sx={{ width: "100%", height: "100%" }}>
         <HeaderWithSidebar>{children}</HeaderWithSidebar>
       </Stack>
-      <WithWidgetMiddleware enable={true}>
+      <WithWidgetMiddleware enable={isCallWidgetEnabled}>
         <CallWidget />
       </WithWidgetMiddleware>
     </SocketProvider>

src/components/widget/call/CallTabs/CallTabPanel/CallHistory/index.jsx

@@ -33,7 +33,7 @@ const CallHistory = ({ tab }) => {
           <ErrorOrEmpty isErrorOrEmpty="empty" />
         ) : (
           <Box>
-            <ListItemOfCalls historyItem={firstItemOfHistory} />
+            <ListItemOfCalls key={'first'} historyItem={firstItemOfHistory} />
             {historyList && (
               <Divider>
                 <Chip

src/components/widget/call/index.jsx

@@ -1,23 +1,9 @@
 "use client";
 import { CallProvider } from "@/lib/contexts/call";
 import { CategoriesProvider } from "@/lib/contexts/category";
-import { useSocket } from "@/lib/contexts/socket";
-import { useEffect } from "react";
 import CallWidgetDialog from "./CallWidgetDialog";
 
 const CallWidget = () => {
-  const { socket, status } = useSocket();
-
-  useEffect(() => {
-    if (status == "connected") return;
-
-    socket.connect();
-
-    return () => {
-      socket.disconnect();
-    };
-  }, [socket]);
-
   return (
     <CategoriesProvider>
       <CallProvider>

src/core/utils/routes.js

@@ -4,10 +4,10 @@ export const GET_USER_ROUTE = api + "/profile/info";
 export const CHANGE_USER_PASSWORD = api + "/profile/change_password";
 export const GET_USER_LOGIN_ROUTE = api + "/auth/login";
 export const GET_USER_LOGOUT_ROUTE = api + "/auth/logout";
-export const GET_PERMISSIONS_ROUTE = "";
+export const GET_PERMISSIONS_ROUTE = api + "/profile/permissions";
 export const GET_SIDEBAR_BADGE_ROUTE = "";
 
-export const GET_CATEGORY = api + "/categories";
+export const GET_CATEGORY = api + "/categories/list";
 
 export const GET_CALLER_HISTORY = api + "/calls/list";
 export const CALL_ACTION = api + "/calls";

src/lib/contexts/socket.js

@@ -92,6 +92,16 @@ export const SocketProvider = ({ children }) => {
     }
   }, [status]);
 
+  useEffect(() => {
+    if (status == "connected") return;
+
+    socket.connect();
+
+    return () => {
+      socket.disconnect();
+    };
+  }, [socket]);
+
   const contextValue = useMemo(() => ({ socket, status }), [socket, status]);
 
   return (