user activity feed - frontend

worklenz-frontend/src/pages/home/home-page.tsx

@@ -2,13 +2,15 @@ import { useEffect } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import Col from 'antd/es/col';
 import Flex from 'antd/es/flex';
+import Row from 'antd/es/row';
+import Card from 'antd/es/card';
 
 import GreetingWithTime from './greeting-with-time';
 import TasksList from '@/pages/home/task-list/tasks-list';
-import TodoList from '@/pages/home/todo-list/todo-list';
 import ProjectDrawer from '@/components/projects/project-drawer/project-drawer';
 import CreateProjectButton from '@/components/projects/project-create-button/project-create-button';
 import RecentAndFavouriteProjectList from '@/pages/home/recent-and-favourite-project-list/recent-and-favourite-project-list';
+import TodoList from './todo-list/todo-list';
 
 import { useDocumentTitle } from '@/hooks/useDoumentTItle';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
@@ -20,11 +22,13 @@ import { fetchProjectHealth } from '@/features/projects/lookups/projectHealth/pr
 import { fetchProjects } from '@/features/home-page/home-page.slice';
 import { createPortal } from 'react-dom';
 import React from 'react';
+import UserActivityFeed from './user-activity-feed/user-activity-feed';
 
 const DESKTOP_MIN_WIDTH = 1024;
 const TASK_LIST_MIN_WIDTH = 500;
 const SIDEBAR_MAX_WIDTH = 400;
 const TaskDrawer = React.lazy(() => import('@components/task-drawer/task-drawer'));
+
 const HomePage = () => {
   const dispatch = useAppDispatch();
   const isDesktop = useMediaQuery({ query: `(min-width: ${DESKTOP_MIN_WIDTH}px)` });
@@ -54,25 +58,6 @@ const HomePage = () => {
       isOwnerOrAdmin && <CreateProjectButton />
     );
 
-  const MainContent = () =>
-    isDesktop ? (
-      <Flex gap={24} align="flex-start" className="w-full mt-12">
-        <Flex style={{ minWidth: TASK_LIST_MIN_WIDTH, width: '100%' }}>
-          <TasksList />
-        </Flex>
-        <Flex vertical gap={24} style={{ width: '100%', maxWidth: SIDEBAR_MAX_WIDTH }}>
-          <TodoList />
-          <RecentAndFavouriteProjectList />
-        </Flex>
-      </Flex>
-    ) : (
-      <Flex vertical gap={24} className="mt-6">
-        <TasksList />
-        <TodoList />
-        <RecentAndFavouriteProjectList />
-      </Flex>
-    );
-
   return (
     <div className="my-24 min-h-[90vh]">
       <Col className="flex flex-col gap-6">
@@ -80,11 +65,30 @@ const HomePage = () => {
         <CreateProjectButtonComponent />
       </Col>
 
-      <MainContent />
+      <Row gutter={[24, 24]} className="mt-12">
+        <Col xs={24} lg={16}>
+          <Card title="Task List" className="h-full">
+            <TasksList />
+          </Card>
+        </Col>
+
+        <Col xs={24} lg={8}>
+          <Flex vertical gap={24}>
+            <UserActivityFeed />
+
+            <TodoList />
+            
+            <Card title="Recent & Favorite Projects">
+              <RecentAndFavouriteProjectList />
+            </Card>
+          </Flex>
+        </Col>
+      </Row>
+
       {createPortal(<TaskDrawer />, document.body, 'home-task-drawer')}
       {createPortal(<ProjectDrawer onClose={() => {}} />, document.body, 'project-drawer')}
     </div>
   );
 };
 
-export default HomePage;
+export default HomePage;