-
+
+
+
+
+
+ {record.task_name}
+
-
-
-
- {item.task_name}
+
+
+ {record.project_name}
+
+
+
+ {fromNow(record.last_activity_at)}
-
- {t('activityTag')}
-
-
-
-
- {item.project_name}
-
-
-
- {item.activity_count} {item.activity_count === 1 ? t('activitySingular') : t('activityPlural')}
-
-
-
- {moment(item.last_activity_at).fromNow()}
-
-
-
-
+
-
- )}
+
+ ),
+ },
+ ];
+
+ return (
+
);
});
diff --git 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
index 0185c2c8..b436b72b 100644
--- 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
@@ -1,9 +1,9 @@
-import React, { useCallback, useMemo } from 'react';
-import { List, Typography, Tag, Tooltip, Space, theme } from 'antd';
-import { ClockCircleOutlined } from '@ant-design/icons';
-import moment from 'moment';
+import React, { useCallback } from 'react';
+import { Table, Typography, Tag, Tooltip, Space, theme } from '@/shared/antd-imports';
+import { ClockCircleOutlined } from '@/shared/antd-imports';
import { useTranslation } from 'react-i18next';
import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { fromNow, formatDate } from '@/utils/dateUtils';
import {
setSelectedTaskId,
setShowTaskDrawer,
@@ -22,15 +22,6 @@ const TimeLoggedTaskList: React.FC
= React.memo(({ task
const dispatch = useAppDispatch();
const { token } = theme.useToken();
- // Enhanced dark mode detection
- const isDarkMode = useMemo(() => {
- return token.colorBgContainer === '#1f1f1f' ||
- token.colorBgBase === '#141414' ||
- token.colorBgElevated === '#1f1f1f' ||
- document.documentElement.getAttribute('data-theme') === 'dark' ||
- document.body.classList.contains('dark');
- }, [token]);
-
const handleTaskClick = useCallback(
(taskId: string, projectId: string) => {
dispatch(setSelectedTaskId(taskId));
@@ -40,160 +31,134 @@ const TimeLoggedTaskList: React.FC = React.memo(({ task
[dispatch]
);
- // Enhanced styling with theme support
- const listItemStyles = useMemo(() => ({
- padding: '16px 20px',
- borderBottom: isDarkMode ? '1px solid #404040' : '1px solid #f0f2f5',
- cursor: 'pointer',
- transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
- borderRadius: '8px',
- margin: '0 0 2px 0',
- background: isDarkMode ? 'transparent' : 'transparent',
- position: 'relative' as const,
- overflow: 'hidden',
- }), [isDarkMode]);
-
- const listItemHoverStyles = useMemo(() => ({
- background: isDarkMode
- ? 'linear-gradient(135deg, #2a2a2a 0%, #353535 100%)'
- : 'linear-gradient(135deg, #f6ffed 0%, #f0fff4 100%)',
- borderColor: isDarkMode ? '#505050' : '#b7eb8f',
- transform: 'translateY(-1px)',
- boxShadow: isDarkMode
- ? '0 4px 16px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2)'
- : '0 4px 16px rgba(82, 196, 26, 0.15), 0 1px 4px rgba(0, 0, 0, 0.1)',
- }), [isDarkMode]);
-
- const iconStyles = useMemo(() => ({
- color: isDarkMode ? '#73d13d' : '#52c41a',
- fontSize: '16px',
- padding: '8px',
- borderRadius: '6px',
- background: isDarkMode
- ? 'linear-gradient(135deg, #1b2918 0%, #273622 100%)'
- : 'linear-gradient(135deg, #f6ffed 0%, #f0fff4 100%)',
- border: isDarkMode ? '1px solid #52c41a20' : '1px solid #52c41a20',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- minWidth: '32px',
- minHeight: '32px',
- }), [isDarkMode]);
-
- const taskNameStyles = useMemo(() => ({
- color: isDarkMode ? '#ffffff' : '#1f2937',
- fontSize: '15px',
- fontWeight: 600,
- lineHeight: '1.4',
- }), [isDarkMode]);
-
- const timeLogTagStyles = useMemo(() => ({
- background: isDarkMode
- ? 'linear-gradient(135deg, #365314 0%, #4d7c0f 100%)'
- : 'linear-gradient(135deg, #f0fff4 0%, #d9f7be 100%)',
- color: isDarkMode ? '#ffffff' : '#365314',
- border: isDarkMode ? '1px solid #4d7c0f' : '1px solid #95de64',
- borderRadius: '6px',
- fontSize: '11px',
- fontWeight: 600,
- padding: '2px 8px',
- textTransform: 'uppercase' as const,
- letterSpacing: '0.5px',
- }), [isDarkMode]);
-
- const timerTagStyles = useMemo(() => ({
- background: isDarkMode
- ? 'linear-gradient(135deg, #0f766e 0%, #14b8a6 100%)'
- : 'linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%)',
- color: isDarkMode ? '#ffffff' : '#0f766e',
- border: isDarkMode ? '1px solid #14b8a6' : '1px solid #5eead4',
- borderRadius: '6px',
- fontSize: '10px',
- fontWeight: 600,
- padding: '1px 6px',
- }), [isDarkMode]);
-
- const metaTextStyles = useMemo(() => ({
- color: isDarkMode ? '#9ca3af' : '#6b7280',
- fontSize: '13px',
- fontWeight: 500,
- }), [isDarkMode]);
-
- const timeTextStyles = useMemo(() => ({
- color: isDarkMode ? '#8c8c8c' : '#9ca3af',
- fontSize: '12px',
- fontWeight: 400,
- }), [isDarkMode]);
-
- const timeLoggedStyles = useMemo(() => ({
- color: isDarkMode ? '#73d13d' : '#52c41a',
- fontSize: '13px',
- fontWeight: 700,
- background: isDarkMode
- ? 'linear-gradient(135deg, #1b291820 0%, #27362220 100%)'
- : 'linear-gradient(135deg, #f6ffed 0%, #f0fff4 100%)',
- padding: '4px 8px',
- borderRadius: '6px',
- border: isDarkMode ? '1px solid #52c41a40' : '1px solid #b7eb8f40',
- }), [isDarkMode]);
+ const columns = [
+ {
+ key: 'task',
+ render: (record: IUserTimeLoggedTask) => (
+ handleTaskClick(record.task_id, record.project_id)}
+ aria-label={`${t('tasks.timeLoggedTaskAriaLabel')} ${record.task_name}`}
+ >
+ {/* Clock Icon */}
+
+
+
+ {/* Main Content */}
+
+ {/* Task Name */}
+
+
+ {record.task_name}
+
+
+
+ {/* Project Name */}
+
+ {record.project_name}
+
+
+
+ {/* Right Side - Time and Status */}
+
+ {/* Time Logged */}
+
+
+ {record.total_time_logged_string}
+
+ {record.logged_by_timer && (
+
+ {t('tasks.timerTag')}
+
+ )}
+
+
+ {/* Time Ago */}
+
+
+ {fromNow(record.last_logged_at)}
+
+
+
+
(
- handleTaskClick(item.task_id, item.project_id)}
- style={listItemStyles}
- onMouseEnter={(e) => {
- Object.assign(e.currentTarget.style, listItemHoverStyles);
- }}
- onMouseLeave={(e) => {
- Object.assign(e.currentTarget.style, listItemStyles);
- }}
- aria-label={`${t('timeLoggedTaskAriaLabel')} ${item.task_name}`}
- >
-
-
-
-
-
-
- {item.task_name}
-
-
- {t('timeLogTag')}
-
-
-
-
- {item.project_name}
-
-
-
- {item.total_time_logged_string}
-
- {item.logged_by_timer && (
-
- {t('timerTag')}
-
- )}
-
-
- {moment(item.last_logged_at).fromNow()}
-
-
-
-
-
-
- )}
+ columns={columns}
+ rowKey="task_id"
+ showHeader={false}
+ pagination={false}
+ size="small"
/>
);
});
diff --git 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
index fa014202..b0b57ded 100644
--- 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
@@ -1,6 +1,6 @@
import React, { useMemo, useCallback, useEffect } from 'react';
-import { Card, Segmented, Skeleton, Empty, Typography, Alert } from 'antd';
-import { ClockCircleOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import { Card, Segmented, Skeleton, Empty, Typography, Alert, Button, Tooltip } from '@/shared/antd-imports';
+import { ClockCircleOutlined, UnorderedListOutlined, SyncOutlined } from '@/shared/antd-imports';
import { useTranslation } from 'react-i18next';
import { useAppSelector } from '@/hooks/useAppSelector';
import { useAppDispatch } from '@/hooks/useAppDispatch';
@@ -54,11 +54,12 @@ const UserActivityFeed: React.FC = () => {
}
// If it's an object with a data property (common API pattern)
if (recentTasksData && typeof recentTasksData === 'object' && 'data' in recentTasksData) {
- return Array.isArray(recentTasksData.data) ? recentTasksData.data : [];
+ const data = (recentTasksData as any).data;
+ return Array.isArray(data) ? data : [];
}
// If it's a different object structure, try to extract tasks
if (recentTasksData && typeof recentTasksData === 'object') {
- const possibleArrays = Object.values(recentTasksData).filter(Array.isArray);
+ const possibleArrays = Object.values(recentTasksData as any).filter(Array.isArray);
return possibleArrays.length > 0 ? possibleArrays[0] : [];
}
return [];
@@ -72,11 +73,12 @@ const UserActivityFeed: React.FC = () => {
}
// If it's an object with a data property (common API pattern)
if (timeLoggedTasksData && typeof timeLoggedTasksData === 'object' && 'data' in timeLoggedTasksData) {
- return Array.isArray(timeLoggedTasksData.data) ? timeLoggedTasksData.data : [];
+ const data = (timeLoggedTasksData as any).data;
+ return Array.isArray(data) ? data : [];
}
// If it's a different object structure, try to extract tasks
if (timeLoggedTasksData && typeof timeLoggedTasksData === 'object') {
- const possibleArrays = Object.values(timeLoggedTasksData).filter(Array.isArray);
+ const possibleArrays = Object.values(timeLoggedTasksData as any).filter(Array.isArray);
return possibleArrays.length > 0 ? possibleArrays[0] : [];
}
return [];
@@ -85,21 +87,21 @@ const UserActivityFeed: React.FC = () => {
const segmentOptions = useMemo(
() => [
{
- value: ActivityFeedType.RECENT_TASKS,
+ value: ActivityFeedType.TIME_LOGGED_TASKS,
label: (
-
- {t('Recent Tasks')}
-
+
+
),
},
{
- value: ActivityFeedType.TIME_LOGGED_TASKS,
+ value: ActivityFeedType.RECENT_TASKS,
label: (
-
- {t('Time Logged Tasks')}
-
+
+
),
},
],
@@ -122,41 +124,77 @@ const UserActivityFeed: React.FC = () => {
}
}, [activeTab, refetchRecentTasks, refetchTimeLoggedTasks]);
- const renderContent = () => {
- if (activeTab === ActivityFeedType.RECENT_TASKS) {
- if (loadingRecentTasks) {
- return
+
+ );
+ } else if (activeTab === ActivityFeedType.RECENT_TASKS) {
+ if (loadingRecentTasks) {
+ return
+
+ );
}
+ return null;
};
return (
-
-
-
+
+ {t('tasks.recentActivity')} ({currentCount})
+
+ }
+ extra={
+
+
+ }
+ style={{ width: '100%' }}
+ >
+
);
diff --git a/worklenz-frontend/src/utils/dateUtils.ts b/worklenz-frontend/src/utils/dateUtils.ts
index 4acddc4d..ad22c911 100644
--- a/worklenz-frontend/src/utils/dateUtils.ts
+++ b/worklenz-frontend/src/utils/dateUtils.ts
@@ -1,32 +1,59 @@
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import 'dayjs/locale/de';
+import 'dayjs/locale/es';
+import 'dayjs/locale/pt';
+import 'dayjs/locale/zh-cn';
+import { getLanguageFromLocalStorage } from './language-utils';
-// Initialize the relativeTime plugin
+// Initialize plugins
dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
-/**
- * Formats a date to a relative time string (e.g., "2 hours ago", "a day ago")
- * This mimics the Angular fromNow pipe functionality
- *
- * @param date - The date to format (string, Date, or dayjs object)
- * @returns A string representing the relative time
- */
-export const fromNow = (date: string | Date | dayjs.Dayjs): string => {
- if (!date) return '';
- return dayjs(date).fromNow();
+// Map application languages to dayjs locales
+const getLocaleFromLanguage = (language: string): string => {
+ const localeMap: Record = {
+ 'en': 'en',
+ 'de': 'de',
+ 'es': 'es',
+ 'pt': 'pt',
+ 'alb': 'en', // Albanian not supported by dayjs, fallback to English
+ 'zh': 'zh-cn'
+ };
+ return localeMap[language] || 'en';
};
/**
- * Formats a date to a specific format
+ * Formats a date to a relative time string (e.g., "2 hours ago", "a day ago")
+ * This mimics the Angular fromNow pipe functionality with locale support
+ *
+ * @param date - The date to format (string, Date, or dayjs object)
+ * @param language - Optional language override (defaults to stored language)
+ * @returns A string representing the relative time
+ */
+export const fromNow = (date: string | Date | dayjs.Dayjs, language?: string): string => {
+ if (!date) return '';
+ const currentLanguage = language || getLanguageFromLocalStorage();
+ const locale = getLocaleFromLanguage(currentLanguage);
+ return dayjs(date).locale(locale).fromNow();
+};
+
+/**
+ * Formats a date to a specific format with locale support
*
* @param date - The date to format (string, Date, or dayjs object)
* @param format - The format string (default: 'YYYY-MM-DD')
+ * @param language - Optional language override (defaults to stored language)
* @returns A formatted date string
*/
export const formatDate = (
date: string | Date | dayjs.Dayjs,
- format: string = 'YYYY-MM-DD'
+ format: string = 'YYYY-MM-DD',
+ language?: string
): string => {
if (!date) return '';
- return dayjs(date).format(format);
+ const currentLanguage = language || getLanguageFromLocalStorage();
+ const locale = getLocaleFromLanguage(currentLanguage);
+ return dayjs(date).locale(locale).format(format);
};