work on caller history part of widget and making fake data and work on that

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/PreviusOperatorData/index.jsx

@@ -3,7 +3,6 @@ import {Avatar, Box, ListItem, ListItemAvatar, ListItemText, Typography} from "@
 import HeadsetMicIcon from '@mui/icons-material/HeadsetMic';
 
 const PreviusOperatorData = ({historyItem}) => {
-    console.log(historyItem)
     const t = useTranslations();
     return (
         <ListItem>

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/Topics/index.jsx

@@ -4,7 +4,7 @@ import {Box, List, ListItem, Typography} from "@mui/material";
 const Topics = ({historyItem}) => {
     const t = useTranslations();
     return (
-        <Box timeout="auto" unmountOnExit>
+        <Box timeout="auto" unmountonexit="true">
             <List component="div" disablePadding>
                 <ListItem sx={{px: 4}}>
                     <Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/index.jsx

@@ -1,19 +1,17 @@
 import {useTranslations} from "next-intl";
-import {Divider, List} from "@mui/material";
+import {Grow, List} from "@mui/material";
 import PreviusOperatorData from "./PreviusOperatorData";
 import Topics from "./Topics";
 
-const ListItemOfCalls = ({lastItem, historyItem}) => {
+const ListItemOfCalls = ({historyItem}) => {
     const t = useTranslations();
-    console.log("historyItem", historyItem)
     return (
-        <>
+        <Grow in={true}>
             <List sx={{width: '100%', bgcolor: 'rgba(222,234,215,0.11)'}}>
                 <PreviusOperatorData historyItem={historyItem}/>
                 <Topics historyItem={historyItem}/>
             </List>
-            {!lastItem && <Divider/>}
-        </>
+        </Grow>
     )
 }
 

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/index.jsx

@@ -10,11 +10,15 @@ import {useState} from "react";
 
 const CallHistory = ({tab}) => {
     const t = useTranslations();
-    const {historyList, isLoadingHistoryList, errorHistoryList} = useCallerHistory(tab.id);
+    const max_size = 10;
+    const {
+        firstItemOfHistory,
+        historyList,
+        isLoadingHistoryList,
+        errorHistoryList
+    } = useCallerHistory(tab.phone_number, max_size);
     const [showRestOfHistory, setShowRestOfHistory] = useState(false);
-    const handleClick = () => {
-        console.info('You clicked the Chip.');
-    };
+
     return (
         <Stack sx={{
             height: "100%",
@@ -30,7 +34,7 @@ const CallHistory = ({tab}) => {
                     <ErrorOrEmpty isErrorOrEmpty="empty"/>
                 ) : (
                     <Box>
-                        <ListItemOfCalls key={historyList[1].id} lastItem={true} historyItem={historyList[1]}/>
+                        <ListItemOfCalls historyItem={firstItemOfHistory}/>
                         <Divider>
                             <Chip
                                 icon={<HeadphonesIcon/>}
@@ -41,10 +45,9 @@ const CallHistory = ({tab}) => {
                         </Divider>
                         {showRestOfHistory && (
                             <>
-                                {historyList.slice(2).map((historyItem, index) => (
+                                {historyList.map((historyItem, index) => (
                                     <>
-                                        <ListItemOfCalls key={historyItem.id} lastItem={true}
-                                                         historyItem={historyItem}/>
+                                        <ListItemOfCalls key={historyItem.id} historyItem={historyItem}/>
                                         <Divider/>
                                     </>
                                 ))}