feat(task-phases): enhance phase creation with custom naming and localization updates

- Updated the phase creation logic to allow custom names, defaulting to a generated name if none is provided. - Modified localization files for multiple languages to improve phase-related text consistency and clarity. - Enhanced the UI components to reflect the new phase naming functionality and ensure proper integration with the task management system. - Added dark mode styling for confirmation modals to improve user experience across themes.
2025-07-11 17:26:21 +05:30
parent 12b430a349
commit affbbbffbf
23 changed files with 464 additions and 77 deletions
--- a/worklenz-frontend/src/api/taskAttributes/phases/phases.api.service.ts
+++ b/worklenz-frontend/src/api/taskAttributes/phases/phases.api.service.ts
@@ -1,12 +1,12 @@
-import apiClient from '@/api/api-client';
-import { API_BASE_URL } from '@/shared/constants';
 import { IServerResponse } from '@/types/common.types';
+import apiClient from '@api/api-client';
+import { API_BASE_URL } from '@/shared/constants';
 import { ITaskPhase } from '@/types/tasks/taskPhase.types';
 import { toQueryString } from '@/utils/toQueryString';

 const rootUrl = `${API_BASE_URL}/task-phases`;

-interface UpdateSortOrderBody {
+export interface UpdateSortOrderBody {
  from_index: number;
  to_index: number;
  phases: ITaskPhase[];
@@ -14,9 +14,10 @@ interface UpdateSortOrderBody {
 }

 export const phasesApiService = {
-  addPhaseOption: async (projectId: string) => {
+  addPhaseOption: async (projectId: string, name?: string) => {
    const q = toQueryString({ id: projectId, current_project_id: projectId });
-    const response = await apiClient.post<IServerResponse<ITaskPhase>>(`${rootUrl}${q}`);
+    const body = name ? { name } : {};
+    const response = await apiClient.post<IServerResponse<ITaskPhase>>(`${rootUrl}${q}`, body);
    return response.data;
  },

--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanCreateSection.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanCreateSection.tsx
@@ -139,7 +139,7 @@ const EnhancedKanbanCreateSection: React.FC = () => {
    }
    if (groupBy === IGroupBy.PHASE) {
      try {
-        const response = await phasesApiService.addPhaseOption(projectId);
+        const response = await phasesApiService.addPhaseOption(projectId, name);
        if (response.done && response.body) {
          dispatch(fetchEnhancedKanbanGroups(projectId));
        }
--- a/worklenz-frontend/src/components/task-management/ManagePhaseModal.css
+++ b/worklenz-frontend/src/components/task-management/ManagePhaseModal.css
@@ -20,6 +20,112 @@
  border-top: 1px solid #303030;
 }

+/* Dark mode confirmation modal styling */
+.dark .ant-modal-confirm .ant-modal-content,
+[data-theme="dark"] .ant-modal-confirm .ant-modal-content {
+  background-color: #1f1f1f !important;
+  border: 1px solid #303030 !important;
+}
+
+.dark .ant-modal-confirm .ant-modal-header,
+[data-theme="dark"] .ant-modal-confirm .ant-modal-header {
+  background-color: #1f1f1f !important;
+  border-bottom: 1px solid #303030 !important;
+}
+
+.dark .ant-modal-confirm .ant-modal-body,
+[data-theme="dark"] .ant-modal-confirm .ant-modal-body {
+  background-color: #1f1f1f !important;
+  color: #d9d9d9 !important;
+}
+
+.dark .ant-modal-confirm .ant-modal-footer,
+[data-theme="dark"] .ant-modal-confirm .ant-modal-footer {
+  background-color: #1f1f1f !important;
+  border-top: 1px solid #303030 !important;
+}
+
+.dark .ant-modal-confirm .ant-modal-confirm-title,
+[data-theme="dark"] .ant-modal-confirm .ant-modal-confirm-title {
+  color: #d9d9d9 !important;
+}
+
+.dark .ant-modal-confirm .ant-modal-confirm-content,
+[data-theme="dark"] .ant-modal-confirm .ant-modal-confirm-content {
+  color: #8c8c8c !important;
+}
+
+.dark .ant-modal-confirm .ant-btn-default,
+[data-theme="dark"] .ant-modal-confirm .ant-btn-default {
+  background-color: #141414 !important;
+  border-color: #303030 !important;
+  color: #d9d9d9 !important;
+}
+
+.dark .ant-modal-confirm .ant-btn-default:hover,
+[data-theme="dark"] .ant-modal-confirm .ant-btn-default:hover {
+  background-color: #262626 !important;
+  border-color: #40a9ff !important;
+  color: #d9d9d9 !important;
+}
+
+.dark .ant-modal-confirm .ant-btn-primary,
+[data-theme="dark"] .ant-modal-confirm .ant-btn-primary {
+  background-color: #1890ff !important;
+  border-color: #1890ff !important;
+  color: #ffffff !important;
+}
+
+.dark .ant-modal-confirm .ant-btn-primary:hover,
+[data-theme="dark"] .ant-modal-confirm .ant-btn-primary:hover {
+  background-color: #40a9ff !important;
+  border-color: #40a9ff !important;
+  color: #ffffff !important;
+}
+
+.dark .ant-modal-confirm .ant-btn-dangerous,
+[data-theme="dark"] .ant-modal-confirm .ant-btn-dangerous {
+  background-color: #ff4d4f !important;
+  border-color: #ff4d4f !important;
+  color: #ffffff !important;
+}
+
+.dark .ant-modal-confirm .ant-btn-dangerous:hover,
+[data-theme="dark"] .ant-modal-confirm .ant-btn-dangerous:hover {
+  background-color: #ff7875 !important;
+  border-color: #ff7875 !important;
+  color: #ffffff !important;
+}
+
+/* Light mode confirmation modal styling (ensure consistency) */
+.ant-modal-confirm .ant-modal-content {
+  background-color: #ffffff;
+  border: 1px solid #f0f0f0;
+}
+
+.ant-modal-confirm .ant-modal-header {
+  background-color: #ffffff;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.ant-modal-confirm .ant-modal-body {
+  background-color: #ffffff;
+  color: #262626;
+}
+
+.ant-modal-confirm .ant-modal-footer {
+  background-color: #ffffff;
+  border-top: 1px solid #f0f0f0;
+}
+
+.ant-modal-confirm .ant-modal-confirm-title {
+  color: #262626;
+}
+
+.ant-modal-confirm .ant-modal-confirm-content {
+  color: #595959;
+}
+
 .dark-modal .ant-form-item-label > label {
  color: #d9d9d9;
 }
--- a/worklenz-frontend/src/components/task-management/ManagePhaseModal.tsx
+++ b/worklenz-frontend/src/components/task-management/ManagePhaseModal.tsx
@@ -18,6 +18,7 @@ import {
  deletePhaseOption,
  updatePhaseColor,
 } from '@/features/projects/singleProject/phase/phases.slice';
+import { updatePhaseLabel } from '@/features/project/project.slice';
 import { ITaskPhase } from '@/types/tasks/taskPhase.types';
 import { Modal as AntModal } from 'antd';
 import { fetchTasksV3 } from '@/features/task-management/task-management.slice';
@@ -307,7 +308,7 @@ const ManagePhaseModal: React.FC<ManagePhaseModalProps> = ({
    if (!newPhaseName.trim() || !finalProjectId) return;

    try {
-      await dispatch(addPhaseOption({ projectId: finalProjectId }));
+      await dispatch(addPhaseOption({ projectId: finalProjectId, name: newPhaseName.trim() }));
      await dispatch(fetchPhasesByProjectId(finalProjectId));
      await refreshTasks();
      setNewPhaseName('');
@@ -408,6 +409,7 @@ const ManagePhaseModal: React.FC<ManagePhaseModalProps> = ({
      ).unwrap();
      
      if (res.done) {
+        dispatch(updatePhaseLabel(phaseName));
        setInitialPhaseName(phaseName);
        await refreshTasks();
      }
@@ -428,7 +430,7 @@ const ManagePhaseModal: React.FC<ManagePhaseModalProps> = ({
        <Title level={4} className={`m-0 font-semibold ${
          isDarkMode ? 'text-gray-100' : 'text-gray-800'
        }`}>
-          {t('configurePhases')}
+          {t('configure')} {phaseName || project?.phase_label || t('phasesText')}
        </Title>
      }
      open={open}
@@ -495,7 +497,7 @@ const ManagePhaseModal: React.FC<ManagePhaseModalProps> = ({
          <Text className={`text-xs font-medium ${
            isDarkMode ? 'text-gray-300' : 'text-blue-700'
          }`}>
-            🎨 Drag phases to reorder them. Click on a phase name to rename it. Each phase can have a custom color.
+            🎨 Drag {(phaseName || project?.phase_label || t('phasesText')).toLowerCase()} to reorder them. Click on a {(phaseName || project?.phase_label || t('phaseText')).toLowerCase()} name to rename it. Each {(phaseName || project?.phase_label || t('phaseText')).toLowerCase()} can have a custom color.
          </Text>
        </div>

@@ -558,7 +560,7 @@ const ManagePhaseModal: React.FC<ManagePhaseModalProps> = ({
              <Text className={`text-xs font-medium ${
                isDarkMode ? 'text-gray-300' : 'text-gray-700'
              }`}>
-                {t('phaseOptions')}
+                {phaseName || project?.phase_label || t('phasesText')} {t('optionsText')}
              </Text>
              <Button 
                type="primary" 
@@ -601,7 +603,7 @@ const ManagePhaseModal: React.FC<ManagePhaseModalProps> = ({
            isDarkMode ? 'text-gray-400' : 'text-gray-500'
          }`}>
            <Text className="text-sm font-medium">
-              {t('noPhasesFound')}
+              {t('no')} {(phaseName || project?.phase_label || t('phasesText')).toLowerCase()} {t('found')}
            </Text>
            <br />
            <Button
--- a/worklenz-frontend/src/components/task-management/ManageStatusModal.css
+++ b/worklenz-frontend/src/components/task-management/ManageStatusModal.css
@@ -20,6 +20,112 @@
  border-top: 1px solid #303030;
 }

+/* Dark mode confirmation modal styling */
+.dark .ant-modal-confirm .ant-modal-content,
+[data-theme="dark"] .ant-modal-confirm .ant-modal-content {
+  background-color: #1f1f1f !important;
+  border: 1px solid #303030 !important;
+}
+
+.dark .ant-modal-confirm .ant-modal-header,
+[data-theme="dark"] .ant-modal-confirm .ant-modal-header {
+  background-color: #1f1f1f !important;
+  border-bottom: 1px solid #303030 !important;
+}
+
+.dark .ant-modal-confirm .ant-modal-body,
+[data-theme="dark"] .ant-modal-confirm .ant-modal-body {
+  background-color: #1f1f1f !important;
+  color: #d9d9d9 !important;
+}
+
+.dark .ant-modal-confirm .ant-modal-footer,
+[data-theme="dark"] .ant-modal-confirm .ant-modal-footer {
+  background-color: #1f1f1f !important;
+  border-top: 1px solid #303030 !important;
+}
+
+.dark .ant-modal-confirm .ant-modal-confirm-title,
+[data-theme="dark"] .ant-modal-confirm .ant-modal-confirm-title {
+  color: #d9d9d9 !important;
+}
+
+.dark .ant-modal-confirm .ant-modal-confirm-content,
+[data-theme="dark"] .ant-modal-confirm .ant-modal-confirm-content {
+  color: #8c8c8c !important;
+}
+
+.dark .ant-modal-confirm .ant-btn-default,
+[data-theme="dark"] .ant-modal-confirm .ant-btn-default {
+  background-color: #141414 !important;
+  border-color: #303030 !important;
+  color: #d9d9d9 !important;
+}
+
+.dark .ant-modal-confirm .ant-btn-default:hover,
+[data-theme="dark"] .ant-modal-confirm .ant-btn-default:hover {
+  background-color: #262626 !important;
+  border-color: #40a9ff !important;
+  color: #d9d9d9 !important;
+}
+
+.dark .ant-modal-confirm .ant-btn-primary,
+[data-theme="dark"] .ant-modal-confirm .ant-btn-primary {
+  background-color: #1890ff !important;
+  border-color: #1890ff !important;
+  color: #ffffff !important;
+}
+
+.dark .ant-modal-confirm .ant-btn-primary:hover,
+[data-theme="dark"] .ant-modal-confirm .ant-btn-primary:hover {
+  background-color: #40a9ff !important;
+  border-color: #40a9ff !important;
+  color: #ffffff !important;
+}
+
+.dark .ant-modal-confirm .ant-btn-dangerous,
+[data-theme="dark"] .ant-modal-confirm .ant-btn-dangerous {
+  background-color: #ff4d4f !important;
+  border-color: #ff4d4f !important;
+  color: #ffffff !important;
+}
+
+.dark .ant-modal-confirm .ant-btn-dangerous:hover,
+[data-theme="dark"] .ant-modal-confirm .ant-btn-dangerous:hover {
+  background-color: #ff7875 !important;
+  border-color: #ff7875 !important;
+  color: #ffffff !important;
+}
+
+/* Light mode confirmation modal styling (ensure consistency) */
+.ant-modal-confirm .ant-modal-content {
+  background-color: #ffffff;
+  border: 1px solid #f0f0f0;
+}
+
+.ant-modal-confirm .ant-modal-header {
+  background-color: #ffffff;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.ant-modal-confirm .ant-modal-body {
+  background-color: #ffffff;
+  color: #262626;
+}
+
+.ant-modal-confirm .ant-modal-footer {
+  background-color: #ffffff;
+  border-top: 1px solid #f0f0f0;
+}
+
+.ant-modal-confirm .ant-modal-confirm-title {
+  color: #262626;
+}
+
+.ant-modal-confirm .ant-modal-confirm-content {
+  color: #595959;
+}
+
 .dark-modal .ant-form-item-label > label {
  color: #d9d9d9;
 }
--- a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
+++ b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
@@ -369,6 +369,7 @@ const FilterDropdown: React.FC<{
  dispatch?: any;
  onManageStatus?: () => void;
  onManagePhase?: () => void;
+  projectPhaseLabel?: string; // Add this prop
 }> = ({
  section,
  onSelectionChange,
@@ -380,6 +381,7 @@ const FilterDropdown: React.FC<{
  dispatch,
  onManageStatus,
  onManagePhase,
+  projectPhaseLabel, // Add this prop
 }) => {
  const { t } = useTranslation('task-list-filters');
  // Add permission checks for groupBy section
@@ -495,7 +497,7 @@ const FilterDropdown: React.FC<{
                isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'
              }`}
            >
-              {t('managePhases')}
+              {t('manage')} {projectPhaseLabel || t('phasesText')}
            </button>
          )}
          {section.selectedValues[0] === 'status' && (
@@ -994,6 +996,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
  const isDarkMode = useAppSelector(state => state.themeReducer?.mode === 'dark');
  const { projectId } = useAppSelector(state => state.projectReducer);
  const { projectView } = useTabSearchParam();
+  const projectPhaseLabel = useAppSelector(state => state.projectReducer.project?.phase_label);

  // Theme-aware class names - memoize to prevent unnecessary re-renders
  // Using greyish colors for both dark and light modes
@@ -1298,6 +1301,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
                dispatch={dispatch}
                onManageStatus={() => setShowManageStatusModal(true)}
                onManagePhase={() => setShowManagePhaseModal(true)}
+                projectPhaseLabel={projectPhaseLabel}
              />
            ))
          ) : (
--- a/worklenz-frontend/src/features/projects/singleProject/phase/PhaseHeader.tsx
+++ b/worklenz-frontend/src/features/projects/singleProject/phase/PhaseHeader.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { useSelectedProject } from '../../../../hooks/useSelectedProject';
 import { useAppSelector } from '../../../../hooks/useAppSelector';
 import { Flex } from 'antd';
 import ConfigPhaseButton from './ConfigPhaseButton';
@@ -10,19 +9,13 @@ const PhaseHeader = () => {
  // localization
  const { t } = useTranslation('task-list-filters');

-  // get selected project for useSelectedProject hook
-  const selectedProject = useSelectedProject();
-
-  // get phase data from redux
-  const phaseList = useAppSelector(state => state.phaseReducer.phaseList);
-
-  //get phases details from phases slice
-  const phase = phaseList.find(el => el.projectId === selectedProject?.projectId);
+  // get project data from redux
+  const { project } = useAppSelector(state => state.projectReducer);

  return (
    <Flex align="center" justify="space-between">
-      {phase?.phase || t('phasesText')}
-      <ConfigPhaseButton color={colors.darkGray} />
+      {project?.phase_label || t('phasesText')}
+      <ConfigPhaseButton />
    </Flex>
  );
 };
--- a/worklenz-frontend/src/features/projects/singleProject/phase/phases.slice.ts
+++ b/worklenz-frontend/src/features/projects/singleProject/phase/phases.slice.ts
@@ -16,9 +16,9 @@ const initialState: PhaseState = {

 export const addPhaseOption = createAsyncThunk(
  'phase/addPhaseOption',
-  async ({ projectId }: { projectId: string }, { rejectWithValue }) => {
+  async ({ projectId, name }: { projectId: string; name?: string }, { rejectWithValue }) => {
    try {
-      const response = await phasesApiService.addPhaseOption(projectId);
+      const response = await phasesApiService.addPhaseOption(projectId, name);
      return response;
    } catch (error) {
      return rejectWithValue(error);
--- a/worklenz-frontend/src/pages/projects/projectView/board/board-section/board-section-card/board-create-section-card.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/board/board-section/board-section-card/board-create-section-card.tsx
@@ -106,13 +106,8 @@ const BoardCreateSectionCard = () => {
    }

    if (groupBy === IGroupBy.PHASE && projectId) {
-      const body = {
-        name: sectionName,
-        project_id: projectId,
-      };
-
      try {
-        const response = await phasesApiService.addPhaseOption(projectId);
+        const response = await phasesApiService.addPhaseOption(projectId, sectionName);
        if (response.done && response.body) {
          dispatch(fetchBoardTaskGroups(projectId));
        }
--- a/worklenz-frontend/src/styles/task-management.css
+++ b/worklenz-frontend/src/styles/task-management.css
@@ -4,6 +4,152 @@
  width: 100%;
 }

+/* Global Confirmation Modal Styles */
+/* Light mode confirmation modal styling (default) */
+.ant-modal-confirm .ant-modal-content {
+  background-color: #ffffff;
+  border: 1px solid #f0f0f0;
+}
+
+.ant-modal-confirm .ant-modal-header {
+  background-color: #ffffff;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.ant-modal-confirm .ant-modal-body {
+  background-color: #ffffff;
+  color: #262626;
+}
+
+.ant-modal-confirm .ant-modal-footer {
+  background-color: #ffffff;
+  border-top: 1px solid #f0f0f0;
+}
+
+.ant-modal-confirm .ant-modal-confirm-title {
+  color: #262626;
+}
+
+.ant-modal-confirm .ant-modal-confirm-content {
+  color: #595959;
+}
+
+/* Dark mode confirmation modal styling */
+.dark .ant-modal-confirm .ant-modal-content,
+[data-theme="dark"] .ant-modal-confirm .ant-modal-content,
+html.dark .ant-modal-confirm .ant-modal-content {
+  background-color: #1f1f1f !important;
+  border: 1px solid #303030 !important;
+}
+
+.dark .ant-modal-confirm .ant-modal-header,
+[data-theme="dark"] .ant-modal-confirm .ant-modal-header,
+html.dark .ant-modal-confirm .ant-modal-header {
+  background-color: #1f1f1f !important;
+  border-bottom: 1px solid #303030 !important;
+}
+
+.dark .ant-modal-confirm .ant-modal-body,
+[data-theme="dark"] .ant-modal-confirm .ant-modal-body,
+html.dark .ant-modal-confirm .ant-modal-body {
+  background-color: #1f1f1f !important;
+  color: #d9d9d9 !important;
+}
+
+.dark .ant-modal-confirm .ant-modal-footer,
+[data-theme="dark"] .ant-modal-confirm .ant-modal-footer,
+html.dark .ant-modal-confirm .ant-modal-footer {
+  background-color: #1f1f1f !important;
+  border-top: 1px solid #303030 !important;
+}
+
+.dark .ant-modal-confirm .ant-modal-confirm-title,
+[data-theme="dark"] .ant-modal-confirm .ant-modal-confirm-title,
+html.dark .ant-modal-confirm .ant-modal-confirm-title {
+  color: #d9d9d9 !important;
+}
+
+.dark .ant-modal-confirm .ant-modal-confirm-content,
+[data-theme="dark"] .ant-modal-confirm .ant-modal-confirm-content,
+html.dark .ant-modal-confirm .ant-modal-confirm-content {
+  color: #8c8c8c !important;
+}
+
+.dark .ant-modal-confirm .ant-btn-default,
+[data-theme="dark"] .ant-modal-confirm .ant-btn-default,
+html.dark .ant-modal-confirm .ant-btn-default {
+  background-color: #141414 !important;
+  border-color: #303030 !important;
+  color: #d9d9d9 !important;
+}
+
+.dark .ant-modal-confirm .ant-btn-default:hover,
+[data-theme="dark"] .ant-modal-confirm .ant-btn-default:hover,
+html.dark .ant-modal-confirm .ant-btn-default:hover {
+  background-color: #262626 !important;
+  border-color: #40a9ff !important;
+  color: #d9d9d9 !important;
+}
+
+.dark .ant-modal-confirm .ant-btn-primary,
+[data-theme="dark"] .ant-modal-confirm .ant-btn-primary,
+html.dark .ant-modal-confirm .ant-btn-primary {
+  background-color: #1890ff !important;
+  border-color: #1890ff !important;
+  color: #ffffff !important;
+}
+
+.dark .ant-modal-confirm .ant-btn-primary:hover,
+[data-theme="dark"] .ant-modal-confirm .ant-btn-primary:hover,
+html.dark .ant-modal-confirm .ant-btn-primary:hover {
+  background-color: #40a9ff !important;
+  border-color: #40a9ff !important;
+  color: #ffffff !important;
+}
+
+.dark .ant-modal-confirm .ant-btn-dangerous,
+[data-theme="dark"] .ant-modal-confirm .ant-btn-dangerous,
+html.dark .ant-modal-confirm .ant-btn-dangerous {
+  background-color: #ff4d4f !important;
+  border-color: #ff4d4f !important;
+  color: #ffffff !important;
+}
+
+.dark .ant-modal-confirm .ant-btn-dangerous:hover,
+[data-theme="dark"] .ant-modal-confirm .ant-btn-dangerous:hover,
+html.dark .ant-modal-confirm .ant-btn-dangerous:hover {
+  background-color: #ff7875 !important;
+  border-color: #ff7875 !important;
+  color: #ffffff !important;
+}
+
+/* Error modal specific styling */
+.dark .ant-modal-error .ant-modal-content,
+[data-theme="dark"] .ant-modal-error .ant-modal-content,
+html.dark .ant-modal-error .ant-modal-content {
+  background-color: #1f1f1f !important;
+  border: 1px solid #303030 !important;
+}
+
+.dark .ant-modal-error .ant-modal-body,
+[data-theme="dark"] .ant-modal-error .ant-modal-body,
+html.dark .ant-modal-error .ant-modal-body {
+  background-color: #1f1f1f !important;
+  color: #d9d9d9 !important;
+}
+
+.dark .ant-modal-error .ant-modal-confirm-title,
+[data-theme="dark"] .ant-modal-error .ant-modal-confirm-title,
+html.dark .ant-modal-error .ant-modal-confirm-title {
+  color: #d9d9d9 !important;
+}
+
+.dark .ant-modal-error .ant-modal-confirm-content,
+[data-theme="dark"] .ant-modal-error .ant-modal-content,
+html.dark .ant-modal-error .ant-modal-confirm-content {
+  color: #8c8c8c !important;
+}
+
 .task-group {
  transition: all 0.2s ease;
 }