{allTasks.find(task => task.id === activeId)?.name ||
allTasks.find(task => task.id === activeId)?.title ||
- 'Task'}
+ t('emptyStates.dragTaskFallback')}
{allTasks.find(task => task.id === activeId)?.task_key}
diff --git a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
index e3239f42..35de7b88 100644
--- a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
+++ b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
@@ -213,7 +213,7 @@ const useFilterData = (position: 'board' | 'list'): FilterSection[] => {
return [
{
id: 'priority',
- label: 'Priority',
+ label: t('priorityText'),
options: filterData.priorities.map((p: any) => ({
value: p.id,
label: p.name,
@@ -288,7 +288,7 @@ const useFilterData = (position: 'board' | 'list'): FilterSection[] => {
return [
{
id: 'priority',
- label: 'Priority',
+ label: t('priorityText'),
options: filterData.priorities.map((p: any) => ({
value: p.id,
label: p.name,
@@ -719,7 +719,34 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
isDarkMode,
}) => {
const { t } = useTranslation('task-list-filters');
+ const { t: tTable } = useTranslation('task-list-table');
const dispatch = useAppDispatch();
+
+ // Helper function to get translated field label using existing task-list-table translations
+ const getFieldLabel = useCallback((fieldKey: string) => {
+ const keyMappings: Record
= {
+ 'KEY': 'keyColumn',
+ 'DESCRIPTION': 'descriptionColumn',
+ 'PROGRESS': 'progressColumn',
+ 'ASSIGNEES': 'assigneesColumn',
+ 'LABELS': 'labelsColumn',
+ 'PHASE': 'phaseColumn',
+ 'STATUS': 'statusColumn',
+ 'PRIORITY': 'priorityColumn',
+ 'TIME_TRACKING': 'timeTrackingColumn',
+ 'ESTIMATION': 'estimationColumn',
+ 'START_DATE': 'startDateColumn',
+ 'DUE_DATE': 'dueDateColumn',
+ 'DUE_TIME': 'dueTimeColumn',
+ 'COMPLETED_DATE': 'completedDateColumn',
+ 'CREATED_DATE': 'createdDateColumn',
+ 'LAST_UPDATED': 'lastUpdatedColumn',
+ 'REPORTER': 'reporterColumn',
+ };
+
+ const translationKey = keyMappings[fieldKey];
+ return translationKey ? tTable(translationKey) : fieldKey;
+ }, [tTable]);
const fieldsRaw = useSelector((state: RootState) => state.taskManagementFields);
const columns = useSelector(selectColumns);
const projectId = useAppSelector(state => state.projectReducer.projectId);
@@ -857,7 +884,7 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
{/* Label and Count */}
- {field.label}
+ {getFieldLabel(field.key)}
);
diff --git a/worklenz-frontend/src/lib/project/project-view-constants.ts b/worklenz-frontend/src/lib/project/project-view-constants.ts
index 5edf1814..289b98c5 100644
--- a/worklenz-frontend/src/lib/project/project-view-constants.ts
+++ b/worklenz-frontend/src/lib/project/project-view-constants.ts
@@ -1,5 +1,6 @@
import React, { ReactNode, Suspense } from 'react';
import { InlineSuspenseFallback } from '@/components/suspense-fallback/suspense-fallback';
+import i18n from '@/i18n';
// Import core components synchronously to avoid suspense in main tabs
import ProjectViewEnhancedBoard from '@/pages/projects/projectView/enhancedBoard/project-view-enhanced-board';
@@ -28,26 +29,31 @@ type TabItems = {
element: ReactNode;
};
+// Function to get translated labels
+const getTabLabel = (key: string): string => {
+ return i18n.t(`project-view:${key}`);
+};
+
// settings all element items use for tabs
export const tabItems: TabItems[] = [
{
index: 0,
key: 'tasks-list',
- label: 'Task List',
+ label: getTabLabel('taskList'),
isPinned: true,
element: React.createElement(TaskListV2),
},
{
index: 1,
key: 'board',
- label: 'Board',
+ label: getTabLabel('board'),
isPinned: true,
element: React.createElement(ProjectViewEnhancedBoard),
},
{
index: 2,
key: 'project-insights-member-overview',
- label: 'Insights',
+ label: getTabLabel('insights'),
element: React.createElement(
Suspense,
{ fallback: React.createElement(InlineSuspenseFallback) },
@@ -57,7 +63,7 @@ export const tabItems: TabItems[] = [
{
index: 3,
key: 'all-attachments',
- label: 'Files',
+ label: getTabLabel('files'),
element: React.createElement(
Suspense,
{ fallback: React.createElement(InlineSuspenseFallback) },
@@ -67,7 +73,7 @@ export const tabItems: TabItems[] = [
{
index: 4,
key: 'members',
- label: 'Members',
+ label: getTabLabel('members'),
element: React.createElement(
Suspense,
{ fallback: React.createElement(InlineSuspenseFallback) },
@@ -77,7 +83,7 @@ export const tabItems: TabItems[] = [
{
index: 5,
key: 'updates',
- label: 'Updates',
+ label: getTabLabel('updates'),
element: React.createElement(
Suspense,
{ fallback: React.createElement(InlineSuspenseFallback) },
@@ -85,3 +91,29 @@ export const tabItems: TabItems[] = [
),
},
];
+
+// Function to update tab labels when language changes
+export const updateTabLabels = () => {
+ tabItems.forEach(item => {
+ switch (item.key) {
+ case 'tasks-list':
+ item.label = getTabLabel('taskList');
+ break;
+ case 'board':
+ item.label = getTabLabel('board');
+ break;
+ case 'project-insights-member-overview':
+ item.label = getTabLabel('insights');
+ break;
+ case 'all-attachments':
+ item.label = getTabLabel('files');
+ break;
+ case 'members':
+ item.label = getTabLabel('members');
+ break;
+ case 'updates':
+ item.label = getTabLabel('updates');
+ break;
+ }
+ });
+};
diff --git a/worklenz-frontend/src/pages/projects/projectView/project-view-header.tsx b/worklenz-frontend/src/pages/projects/projectView/project-view-header.tsx
index 62db71fe..c77c149d 100644
--- a/worklenz-frontend/src/pages/projects/projectView/project-view-header.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/project-view-header.tsx
@@ -268,7 +268,7 @@ const ProjectViewHeader = memo(() => {
{
key: 'import',
label: (
-
+
{t('importTask')}
),
@@ -285,19 +285,21 @@ const ProjectViewHeader = memo(() => {
if (selectedProject.category_id) {
elements.push(
-
- {selectedProject.category_name}
-
+
+
+ {selectedProject.category_name}
+
+
);
}
if (selectedProject.status) {
elements.push(
-
+
{
if (selectedProject.start_date || selectedProject.end_date) {
const tooltipContent = (
+ {t('projectDatesInfo')}
+
{selectedProject.start_date &&
`${t('startDate')}: ${formatDate(new Date(selectedProject.start_date))}`}
{selectedProject.end_date && (
@@ -348,7 +352,7 @@ const ProjectViewHeader = memo(() => {
// Refresh button
actions.push(
-
+
}
@@ -360,7 +364,7 @@ const ProjectViewHeader = memo(() => {
// Save as template (owner/admin only)
if (isOwnerOrAdmin) {
actions.push(
-
+
} onClick={handleSaveAsTemplate} />
);
@@ -368,14 +372,14 @@ const ProjectViewHeader = memo(() => {
// Settings button
actions.push(
-
+
} onClick={handleSettingsClick} />
);
// Subscribe button
actions.push(
-
+
+
+ } onClick={handleInvite}>
+ {t('invite')}
+
+
);
}
// Create task button
if (isOwnerOrAdmin) {
actions.push(
- }
- menu={{ items: dropdownItems }}
- trigger={['click']}
- onClick={handleCreateTask}
- >
- {t('createTask')}
-
+
+ }
+ menu={{ items: dropdownItems }}
+ trigger={['click']}
+ onClick={handleCreateTask}
+ >
+ {t('createTask')}
+
+
);
} else {
actions.push(
- }
- onClick={handleCreateTask}
- >
- {t('createTask')}
-
+
+ }
+ onClick={handleCreateTask}
+ >
+ {t('createTask')}
+
+
);
}
@@ -451,14 +461,16 @@ const ProjectViewHeader = memo(() => {
const pageHeaderTitle = useMemo(
() => (
-
+
+
+
{selectedProject?.name}
{projectAttributes}
),
- [handleNavigateToProjects, selectedProject?.name, projectAttributes]
+ [handleNavigateToProjects, selectedProject?.name, projectAttributes, t]
);
// Memoized page header styles
diff --git a/worklenz-frontend/src/pages/projects/projectView/project-view.tsx b/worklenz-frontend/src/pages/projects/projectView/project-view.tsx
index 32b53f08..a18023f8 100644
--- a/worklenz-frontend/src/pages/projects/projectView/project-view.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/project-view.tsx
@@ -32,7 +32,7 @@ import { resetSelection } from '@/features/task-management/selection.slice';
import { resetFields } from '@/features/task-management/taskListFields.slice';
import { fetchLabels } from '@/features/taskAttributes/taskLabelSlice';
import { deselectAll } from '@/features/projects/bulkActions/bulkActionSlice';
-import { tabItems } from '@/lib/project/project-view-constants';
+import { tabItems, updateTabLabels } from '@/lib/project/project-view-constants';
import {
setSelectedTaskId,
setShowTaskDrawer,
@@ -41,6 +41,7 @@ import {
import { resetState as resetEnhancedKanbanState } from '@/features/enhanced-kanban/enhanced-kanban.slice';
import { setProjectId as setInsightsProjectId } from '@/features/projects/insights/project-insights.slice';
import { SuspenseFallback } from '@/components/suspense-fallback/suspense-fallback';
+import { useTranslation } from 'react-i18next';
// Import critical components synchronously to avoid suspense interruptions
import TaskDrawer from '@components/task-drawer/task-drawer';
@@ -63,13 +64,14 @@ const ProjectView = React.memo(() => {
const dispatch = useAppDispatch();
const [searchParams] = useSearchParams();
const { projectId } = useParams();
+ const { t } = useTranslation('project-view');
// Memoized selectors to prevent unnecessary re-renders
const selectedProject = useAppSelector(state => state.projectReducer.project);
const projectLoading = useAppSelector(state => state.projectReducer.projectLoading);
// Optimize document title updates
- useDocumentTitle(selectedProject?.name || 'Project View');
+ useDocumentTitle(selectedProject?.name || t('projectView'));
// Memoize URL params to prevent unnecessary state updates
const urlParams = useMemo(
@@ -174,6 +176,11 @@ const ProjectView = React.memo(() => {
setIsInitialized(false);
}, [projectId]);
+ // Update tab labels when language changes
+ useEffect(() => {
+ updateTabLabels();
+ }, [t]);
+
// Effect for handling task drawer opening from URL params
useEffect(() => {
if (taskid && isInitialized) {
@@ -287,6 +294,7 @@ const ProjectView = React.memo(() => {
e.stopPropagation();
pinToDefaultTab(item.key);
}}
+ title={item.key === pinnedTab ? t('unpinTab') : t('pinTab')}
/>
)}
@@ -296,7 +304,7 @@ const ProjectView = React.memo(() => {
}));
return menuItems;
- }, [pinnedTab, pinToDefaultTab]);
+ }, [pinnedTab, pinToDefaultTab, t]);
// Optimized secondary components loading with better UX
const [shouldLoadSecondaryComponents, setShouldLoadSecondaryComponents] = useState(false);
diff --git a/worklenz-frontend/src/pages/settings/sidebar/settings-sidebar.tsx b/worklenz-frontend/src/pages/settings/sidebar/settings-sidebar.tsx
index b233018a..61f67a94 100644
--- a/worklenz-frontend/src/pages/settings/sidebar/settings-sidebar.tsx
+++ b/worklenz-frontend/src/pages/settings/sidebar/settings-sidebar.tsx
@@ -24,7 +24,7 @@ const SettingSidebar: React.FC = () => {
const items: Required['items'] = accessibleSettings
.map(item => {
if (currentSession?.is_google && item.key === 'change-password') {
- return undefined;
+ return null;
}
return {
key: item.key,
@@ -39,7 +39,7 @@ const SettingSidebar: React.FC = () => {
),
};
})
- .filter(Boolean);
+ .filter((item): item is NonNullable => item !== null);
return (
{
const { socket } = useSocket();
const refreshTeamMembers = useAppSelector(state => state.memberReducer.refreshTeamMembers); // Listen to refresh flag
+ useDocumentTitle(t('title') || 'Team Members');
+
const [model, setModel] = useState({ total: 0, data: [] });
const [searchQuery, setSearchQuery] = useState('');
const [isLoading, setIsLoading] = useState(false);
diff --git a/worklenz-frontend/src/pages/settings/teams/teams-settings.tsx b/worklenz-frontend/src/pages/settings/teams/teams-settings.tsx
index a46a10b4..5c21fb0c 100644
--- a/worklenz-frontend/src/pages/settings/teams/teams-settings.tsx
+++ b/worklenz-frontend/src/pages/settings/teams/teams-settings.tsx
@@ -5,6 +5,7 @@ import { durationDateFormat } from '@utils/durationDateFormat';
import { EditOutlined } from '@ant-design/icons';
import { useEffect, useState } from 'react';
import EditTeamModal from '@/components/settings/edit-team-name-modal';
+import { useTranslation } from 'react-i18next';
import { fetchTeams } from '@features/teams/teamSlice';
import { useAppDispatch } from '@/hooks/useAppDispatch';
@@ -12,7 +13,8 @@ import { useDocumentTitle } from '@/hooks/useDoumentTItle';
import { ITeamGetResponse } from '@/types/teams/team.type';
const TeamsSettings = () => {
- useDocumentTitle('Teams');
+ const { t } = useTranslation('settings/teams');
+ useDocumentTitle(t('title'));
const [selectedTeam, setSelectedTeam] = useState(null);
const [isModalOpen, setIsModalOpen] = useState(false);
@@ -26,27 +28,27 @@ const TeamsSettings = () => {
const columns: TableProps['columns'] = [
{
key: 'name',
- title: 'Name',
+ title: t('name'),
render: (record: ITeamGetResponse) => {record.name},
},
{
key: 'created',
- title: 'Created',
+ title: t('created'),
render: (record: ITeamGetResponse) => (
{durationDateFormat(record.created_at)}
),
},
{
key: 'ownsBy',
- title: 'Owns By',
+ title: t('ownsBy'),
render: (record: ITeamGetResponse) => {record.owns_by},
},
{
key: 'actionBtns',
width: 60,
render: (record: ITeamGetResponse) => (
-
+
}
@@ -69,13 +71,12 @@ const TeamsSettings = () => {
- {teamsList.length} Team
- {teamsList.length !== 1 && 's'}
+ {teamsList.length} {teamsList.length === 1 ? t('team') : t('teams')}
-
+
{/* this button pin this route to navbar */}
-
+
diff --git a/worklenz-frontend/src/utils/current-date-string.ts b/worklenz-frontend/src/utils/current-date-string.ts
index c0ff9782..10b87929 100644
--- a/worklenz-frontend/src/utils/current-date-string.ts
+++ b/worklenz-frontend/src/utils/current-date-string.ts
@@ -4,9 +4,56 @@ import { getLanguageFromLocalStorage } from './language-utils';
export const currentDateString = (): string => {
const date = dayjs();
const localeString = getLanguageFromLocalStorage();
- const locale = localeString === 'en' ? 'en' : localeString === 'es' ? 'es' : 'pt';
+
+ // Map language codes to dayjs locales
+ let locale = 'en'; // Default to English
+ switch (localeString) {
+ case 'en':
+ locale = 'en';
+ break;
+ case 'es':
+ locale = 'es';
+ break;
+ case 'pt':
+ locale = 'pt';
+ break;
+ case 'de':
+ locale = 'de';
+ break;
+ case 'zh_cn':
+ locale = 'zh-cn';
+ break;
+ case 'alb':
+ locale = 'sq'; // Albanian locale code for dayjs
+ break;
+ default:
+ locale = 'en';
+ }
+
+ // Get localized "Today is" text
+ let todayText = 'Today is'; // Default English
+ switch (localeString) {
+ case 'en':
+ todayText = 'Today is';
+ break;
+ case 'es':
+ todayText = 'Hoy es';
+ break;
+ case 'pt':
+ todayText = 'Hoje é';
+ break;
+ case 'de':
+ todayText = 'Heute ist';
+ break;
+ case 'zh_cn':
+ todayText = '今天是';
+ break;
+ case 'alb':
+ todayText = 'Sot është';
+ break;
+ default:
+ todayText = 'Today is';
+ }
- const todayText =
- localeString === 'en' ? 'Today is' : localeString === 'es' ? 'Hoy es' : 'Hoje é';
return `${todayText} ${date.locale(locale).format('dddd, MMMM DD, YYYY')}`;
};
diff --git a/worklenz-frontend/src/utils/greetingString.ts b/worklenz-frontend/src/utils/greetingString.ts
index d81bd1f2..86043f0b 100644
--- a/worklenz-frontend/src/utils/greetingString.ts
+++ b/worklenz-frontend/src/utils/greetingString.ts
@@ -49,5 +49,16 @@ export const greetingString = (name: string): string => {
evening = '晚上好';
}
- return `${greetingPrefix} ${name}, ${greetingSuffix} ${greet}!`;
+ // Get the localized time period based on the current time
+ let localizedTimePeriod;
+ if (greet === 'morning') localizedTimePeriod = morning;
+ else if (greet === 'afternoon') localizedTimePeriod = afternoon;
+ else localizedTimePeriod = evening;
+
+ // Handle Chinese language which has different structure
+ if (language === 'zh_cn') {
+ return `${greetingPrefix} ${name}, ${localizedTimePeriod}!`;
+ }
+
+ return `${greetingPrefix} ${name}, ${greetingSuffix} ${localizedTimePeriod}!`;
};