user activity feed - frontend

2025-07-09 07:44:23 +05:30
parent 2587b8afd9
commit 5222d75064
14 changed files with 497 additions and 28 deletions
--- a/worklenz-frontend/src/pages/home/home-page.tsx
+++ b/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;
--- a/worklenz-frontend/src/pages/home/user-activity-feed/task-activity-list.tsx
+++ b/worklenz-frontend/src/pages/home/user-activity-feed/task-activity-list.tsx
@@ -0,0 +1,81 @@
+import React, { useCallback } from 'react';
+import { List, Typography, Tooltip, Space, Tag } from 'antd';
+import { FileTextOutlined } from '@ant-design/icons';
+import moment from 'moment';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import {
+  setSelectedTaskId,
+  setShowTaskDrawer,
+  fetchTask,
+} from '@/features/task-drawer/task-drawer.slice';
+import { IUserRecentTask } from '@/types/home/user-activity.types';
+
+const { Text } = Typography;
+
+interface TaskActivityListProps {
+  tasks: IUserRecentTask[];
+}
+
+const TaskActivityList: React.FC<TaskActivityListProps> = React.memo(({ tasks }) => {
+  const dispatch = useAppDispatch();
+
+  const handleTaskClick = useCallback(
+    (taskId: string, projectId: string) => {
+      dispatch(setSelectedTaskId(taskId));
+      dispatch(setShowTaskDrawer(true));
+      dispatch(fetchTask({ taskId, projectId }));
+    },
+    [dispatch]
+  );
+
+  return (
+    <List
+      dataSource={tasks}
+      renderItem={item => (
+        <List.Item
+          onClick={() => handleTaskClick(item.task_id, item.project_id)}
+          style={{
+            padding: '12px 0',
+            borderBottom: '1px solid #f0f0f0',
+            cursor: 'pointer',
+            transition: 'all 0.2s ease',
+          }}
+          aria-label={`Recent task: ${item.task_name}`}
+        >
+          <Space direction="vertical" style={{ width: '100%' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <FileTextOutlined style={{ color: '#1890ff' }} />
+              <Text strong ellipsis style={{ flex: 1 }}>
+                {item.task_name}
+              </Text>
+              <Tag color="geekblue" style={{ marginLeft: 4, fontWeight: 500 }}>
+                Activity
+              </Tag>
+              <Tooltip title={moment(item.last_activity_at).format('MMMM Do YYYY, h:mm:ss a')}>
+                <Text type="secondary" style={{ fontSize: 12 }}>
+                  {moment(item.last_activity_at).fromNow()}
+                </Text>
+              </Tooltip>
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}
+            >
+              <Text type="secondary" style={{ fontSize: 12 }}>
+                {item.project_name}
+              </Text>
+              <Text type="secondary" style={{ fontSize: 12 }}>
+                {item.activity_count} {item.activity_count === 1 ? 'activity' : 'activities'}
+              </Text>
+            </div>
+          </Space>
+        </List.Item>
+      )}
+    />
+  );
+});
+
+export default TaskActivityList;
--- a/worklenz-frontend/src/pages/home/user-activity-feed/time-logged-task-list.tsx
+++ b/worklenz-frontend/src/pages/home/user-activity-feed/time-logged-task-list.tsx
@@ -0,0 +1,80 @@
+import React, { useCallback } from 'react';
+import { List, Typography, Tag, Tooltip, Space } from 'antd';
+import { ClockCircleOutlined } from '@ant-design/icons';
+import moment from 'moment';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import {
+  setSelectedTaskId,
+  setShowTaskDrawer,
+  fetchTask,
+} from '@/features/task-drawer/task-drawer.slice';
+import { IUserTimeLoggedTask } from '@/types/home/user-activity.types';
+
+const { Text } = Typography;
+
+interface TimeLoggedTaskListProps {
+  tasks: IUserTimeLoggedTask[];
+}
+
+const TimeLoggedTaskList: React.FC<TimeLoggedTaskListProps> = React.memo(({ tasks }) => {
+  const dispatch = useAppDispatch();
+
+  const handleTaskClick = useCallback(
+    (taskId: string, projectId: string) => {
+      dispatch(setSelectedTaskId(taskId));
+      dispatch(setShowTaskDrawer(true));
+      dispatch(fetchTask({ taskId, projectId }));
+    },
+    [dispatch]
+  );
+
+  return (
+    <List
+      dataSource={tasks}
+      renderItem={item => (
+        <List.Item
+          onClick={() => handleTaskClick(item.task_id, item.project_id)}
+          style={{
+            padding: '12px 0',
+            borderBottom: '1px solid #f0f0f0',
+            cursor: 'pointer',
+            transition: 'all 0.2s ease',
+          }}
+          aria-label={`Time logged task: ${item.task_name}`}
+        >
+          <Space direction="vertical" style={{ width: '100%' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <ClockCircleOutlined style={{ color: '#52c41a' }} />
+              <Text strong ellipsis style={{ flex: 1 }}>
+                {item.task_name}
+              </Text>
+              <Tag color="lime" style={{ marginLeft: 4, fontWeight: 500 }}>
+                Time Log
+              </Tag>
+              <Space>
+                <Text strong style={{ color: '#52c41a', fontSize: 12 }}>
+                  {item.total_time_logged_string}
+                </Text>
+                {item.logged_by_timer && (
+                  <Tag color="green">
+                    Timer
+                  </Tag>
+                )}
+                <Tooltip title={moment(item.last_logged_at).format('MMMM Do YYYY, h:mm:ss a')}>
+                  <Text type="secondary" style={{ fontSize: 12 }}>
+                    {moment(item.last_logged_at).fromNow()}
+                  </Text>
+                </Tooltip>
+              </Space>
+            </div>
+            <Text type="secondary" style={{ fontSize: 12 }}>
+              {item.project_name}
+            </Text>
+          </Space>
+        </List.Item>
+      )}
+    />
+  );
+});
+
+export default TimeLoggedTaskList;
--- a/worklenz-frontend/src/pages/home/user-activity-feed/user-activity-feed.css
+++ b/worklenz-frontend/src/pages/home/user-activity-feed/user-activity-feed.css
@@ -0,0 +1,19 @@
+.activity-feed-item:hover {
+  background-color: var(--activity-hover, #fafafa);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.activity-feed-item:active {
+  transform: translateY(0);
+  background-color: var(--activity-active, #f0f0f0);
+}
+
+/* Dark theme support */
+[data-theme="dark"] .activity-feed-item:hover {
+  background-color: var(--activity-hover, #262626);
+}
+
+[data-theme="dark"] .activity-feed-item:active {
+  background-color: var(--activity-active, #1f1f1f);
+}
--- a/worklenz-frontend/src/pages/home/user-activity-feed/user-activity-feed.tsx
+++ b/worklenz-frontend/src/pages/home/user-activity-feed/user-activity-feed.tsx
@@ -0,0 +1,126 @@
+import React, { useMemo, useCallback } from 'react';
+import { Card, Segmented, Skeleton, Empty, Typography, Alert } from 'antd';
+import { ClockCircleOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { ActivityFeedType } from '@/types/home/user-activity.types';
+import { setActiveTab } from '@/features/home-page/user-activity.slice';
+import {
+  useGetUserRecentTasksQuery,
+  useGetUserTimeLoggedTasksQuery,
+} from '@/api/home-page/user-activity.api.service';
+import TaskActivityList from './task-activity-list';
+import TimeLoggedTaskList from './time-logged-task-list';
+
+const { Title } = Typography;
+
+const UserActivityFeed: React.FC = () => {
+  const { t } = useTranslation('home');
+  const dispatch = useAppDispatch();
+  const { activeTab } = useAppSelector(state => state.userActivityReducer);
+
+  const {
+    data: recentTasksData,
+    isLoading: loadingRecentTasks,
+    error: recentTasksError,
+  } = useGetUserRecentTasksQuery(
+    { limit: 10 },
+    { skip: activeTab !== ActivityFeedType.RECENT_TASKS }
+  );
+
+  const {
+    data: timeLoggedTasksData,
+    isLoading: loadingTimeLoggedTasks,
+    error: timeLoggedTasksError,
+  } = useGetUserTimeLoggedTasksQuery(
+    { limit: 10 },
+    { skip: activeTab !== ActivityFeedType.TIME_LOGGED_TASKS }
+  );
+
+  const recentTasks = useMemo(() => {
+    if (!recentTasksData) return [];
+    return Array.isArray(recentTasksData) ? recentTasksData : [];
+  }, [recentTasksData]);
+
+  const timeLoggedTasks = useMemo(() => {
+    if (!timeLoggedTasksData) return [];
+    return Array.isArray(timeLoggedTasksData) ? timeLoggedTasksData : [];
+  }, [timeLoggedTasksData]);
+
+  const segmentOptions = useMemo(
+    () => [
+      {
+        value: ActivityFeedType.RECENT_TASKS,
+        label: (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            <UnorderedListOutlined />
+            <span>{t('Recent Tasks')}</span>
+          </div>
+        ),
+      },
+      {
+        value: ActivityFeedType.TIME_LOGGED_TASKS,
+        label: (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            <ClockCircleOutlined />
+            <span>{t('Time Logged Tasks')}</span>
+          </div>
+        ),
+      },
+    ],
+    [t]
+  );
+
+  const handleTabChange = useCallback(
+    (value: ActivityFeedType) => {
+      dispatch(setActiveTab(value));
+    },
+    [dispatch]
+  );
+
+  const renderContent = () => {
+    if (activeTab === ActivityFeedType.RECENT_TASKS) {
+      if (recentTasksError) {
+        return <Alert message={t('Error Loading Recent Tasks')} type="error" showIcon />;
+      }
+      if (loadingRecentTasks) {
+        return <Skeleton active />;
+      }
+      if (recentTasks.length === 0) {
+        return <Empty description={t('No Recent Tasks')} />;
+      }
+      return <TaskActivityList tasks={recentTasks} />;
+    } else {
+      if (timeLoggedTasksError) {
+        return <Alert message={t('Error Loading Time Logged Tasks')} type="error" showIcon />;
+      }
+      if (loadingTimeLoggedTasks) {
+        return <Skeleton active />;
+      }
+      if (timeLoggedTasks.length === 0) {
+        return <Empty description={t('No Time Logged Tasks')} />;
+      }
+      return <TimeLoggedTaskList tasks={timeLoggedTasks} />;
+    }
+  };
+
+  return (
+    <Card>
+      <div style={{ marginBottom: 16 }}>
+        <Title level={5} style={{ marginBottom: 12 }}>
+          {t('Recent Activity')}
+        </Title>
+        <Segmented
+          options={segmentOptions}
+          value={activeTab}
+          onChange={handleTabChange}
+          style={{ width: '100%' }}
+        />
+      </div>
+      {renderContent()}
+    </Card>
+  );
+};
+
+export default React.memo(UserActivityFeed);