[Feat]: Add Multi-Language Translations For Tasks, Shift Timing, and Confirmation Messages #3377
Conversation
WalkthroughThe changes in this pull request enhance internationalization support across various components of the application, specifically the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsxOops! Something went wrong! :( ESLint: 8.46.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/apps/web/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (21)
apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx (5)
Line range hint
29-33: Remove commented codeRemove the commented-out state initializations as they add noise to the codebase.
- // const [dateRange, setDateRange] = useState<{ from: Date | null }>({ - // from: new Date(), - // }); - // const [endTime, setEndTime] = useState<string>(''); - // const [startTime, setStartTime] = useState<string>('');
Line range hint
34-48: Refactor time formatting logicThe time formatting logic should:
- Use the user's locale instead of hardcoded 'en-US'
- Be extracted into a reusable utility function
+ const formatTimeFromDate = (date: Date | null): string => { + if (!date) return ''; + return date.toLocaleTimeString(undefined, { hour12: false }).slice(0, 5); + }; const [endTime, setEndTime] = useState<string>( - dataTimesheet.timesheet?.stoppedAt - ? new Date(dataTimesheet.timesheet.stoppedAt).toLocaleTimeString('en-US', { hour12: false }).slice(0, 5) - : '' + formatTimeFromDate(dataTimesheet.timesheet?.stoppedAt ? new Date(dataTimesheet.timesheet.stoppedAt) : null) ); const [startTime, setStartTime] = useState<string>( - dataTimesheet.timesheet?.startedAt - ? new Date(dataTimesheet.timesheet.startedAt).toLocaleTimeString('en-US', { hour12: false }).slice(0, 5) - : '' + formatTimeFromDate(dataTimesheet.timesheet?.startedAt ? new Date(dataTimesheet.timesheet.startedAt) : null) );
Line range hint
175-189: Enhance form validation feedbackThe notes textarea shows a red border when empty but lacks proper error messaging. Consider:
- Adding error message display
- Using form validation library (e.g., react-hook-form)
- Consistent validation across all required fields
+ const [notesError, setNotesError] = useState<string>(''); <div className="w-full flex flex-col"> <span className="text-[#282048] dark:text-gray-400">{t('common.NOTES')}</span> <textarea value={notes} - onChange={(e) => setNotes(e.target.value)} + onChange={(e) => { + setNotes(e.target.value); + setNotesError(e.target.value.trim() ? '' : t('errors.NOTES_REQUIRED')); + }} placeholder={t('placeholders.INSERT_NOTES')} className={clsxm( "bg-transparent focus:border-transparent focus:ring-2 focus:ring-transparent", "placeholder-gray-300 placeholder:font-normal resize-none p-2 grow w-full", "border border-gray-200 dark:border-slate-600 dark:bg-dark--theme-light rounded-md h-40 bg-[#FBB6500D]", - notes.trim().length === 0 && "border-red-500" + notesError && "border-red-500" )} maxLength={120} minLength={0} aria-label={t('aria.NOTES_INPUT')} required /> + {notesError && <span className="text-red-500 text-sm mt-1">{notesError}</span>} <div className="text-sm text-[#282048] dark:text-gray-500 text-right"> {notes.length}/{120} </div> </div>
Line range hint
89-91: Improve modal UX with loading states and unsaved changes handlingConsider the following UX improvements:
- Translate modal title
- Add loading states to buttons
- Add unsaved changes confirmation
<Modal closeModal={closeModal} isOpen={isOpen} showCloseIcon - title={'Edit Task'} + title={t('modals.EDIT_TASK')} className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:w-40 md:min-w-[30rem] justify-start h-[auto]" titleClass="font-bold flex justify-start w-full"> // ... other code ... + const [isSubmitting, setIsSubmitting] = useState(false); + const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false); <div className="flex items-center gap-x-2 justify-end w-full"> <button type="button" + disabled={isSubmitting} className={clsxm( "dark:text-primary-light h-[2.3rem] w-[5.5rem] border px-2 rounded-lg border-gray-300 dark:border-slate-600 font-normal dark:bg-dark--theme-light", + isSubmitting && "opacity-50 cursor-not-allowed" )} + onClick={() => { + if (hasUnsavedChanges) { + if (window.confirm(t('confirmations.UNSAVED_CHANGES'))) { + closeModal(); + } + } else { + closeModal(); + } + }} > {t('common.CANCEL')} </button> <button type="submit" + disabled={isSubmitting} className={clsxm( 'bg-primary dark:bg-primary-light h-[2.3rem] w-[5.5rem] justify-center font-normal flex items-center text-white px-2 rounded-lg', + isSubmitting && "opacity-50 cursor-not-allowed" )}> - {t('common.SAVE')} + {isSubmitting ? t('common.SAVING') : t('common.SAVE')} </button> </div>Also applies to: 211-227
Line range hint
20-24: Optimize component performance with memoizationConsider memoizing callback functions and complex computations:
- Use
useCallbackfor event handlers- Use
useMemofor derived values+ import { useCallback, useMemo } from 'react'; export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskModalProps) { + const handleFromChange = useCallback((fromDate: Date | null) => { + setDateRange((prev) => ({ ...prev, from: fromDate })); + }, []); + const handleNotesChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => { + setNotes(e.target.value); + }, []); + const formattedStartTime = useMemo(() => + formatTimeFromDate(dataTimesheet.timesheet?.startedAt ? new Date(dataTimesheet.timesheet.startedAt) : null), + [dataTimesheet.timesheet?.startedAt] + );apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx (5)
Line range hint
145-147: Internationalize the notes placeholder textThe textarea placeholder is still hardcoded. Consider using the translation function for consistency with other internationalized strings.
<textarea value={notes} - placeholder="Insert notes here..." + placeholder={t('common.INSERT_NOTES_HERE')} className={clsxm(
Line range hint
357-371: Internationalize Start/End labels in ShiftTimingSelect usageThe "Start" and "End" labels should use the translation function for consistency.
<ShiftTimingSelect - label="Start" + label={t('common.START')} timeOptions={timeOptions} placeholder="00:00" className="bg-[#30B3661A]" value={value.startTime} onChange={(value) => onChange(index, 'startTime', value)} /> <ShiftTimingSelect - label="End" + label={t('common.END')} timeOptions={timeOptions} placeholder="00:00" className="bg-[#DA27271A]" value={value.endTime} onChange={(value) => onChange(index, 'endTime', value)} />
Line range hint
264-282: Improve shift overlap detection logicThe current overlap detection doesn't handle all edge cases correctly, particularly when shifts span midnight. Consider refactoring the overlap detection to handle these cases.
const isOverlapping = shifts.some((shift, i) => { if (i === index || !shift.startTime || !shift.endTime) return false; const currentStart = convertToMinutes(startTime); const currentEnd = convertToMinutes(endTime); const shiftStart = convertToMinutes(shift.startTime); const shiftEnd = convertToMinutes(shift.endTime); - return (currentStart >= shiftStart && currentStart < shiftEnd) || - (currentEnd > shiftStart && currentEnd <= shiftEnd); + // Handle cases where shifts might span midnight + const normalizedCurrentEnd = currentEnd < currentStart ? currentEnd + 1440 : currentEnd; + const normalizedShiftEnd = shiftEnd < shiftStart ? shiftEnd + 1440 : shiftEnd; + + return ( + (currentStart >= shiftStart && currentStart < normalizedShiftEnd) || + (normalizedCurrentEnd > shiftStart && normalizedCurrentEnd <= normalizedShiftEnd) || + (currentStart <= shiftStart && normalizedCurrentEnd >= normalizedShiftEnd) + ); });
Line range hint
71-81: Add proper error handling and validation feedbackThe task input relies solely on HTML5 validation without proper error messaging. Consider adding explicit error handling and user feedback.
+ const [taskError, setTaskError] = React.useState(''); + const validateTask = (value: string) => { + if (!value.trim()) { + setTaskError(t('errors.TASK_REQUIRED')); + return false; + } + setTaskError(''); + return true; + }; <input aria-label="Task" aria-describedby="task-error" type="Task" value={task} - onChange={(e) => setTasks(e.target?.value)} + onChange={(e) => { + setTasks(e.target?.value); + if (taskError) validateTask(e.target?.value); + }} + onBlur={(e) => validateTask(e.target?.value)} className={clsxm( "w-full p-2 border font-normal rounded-md", "border-slate-300 dark:border-slate-600 dark:bg-dark--theme-light", + taskError && "border-red-500" )} placeholder='Bug for creating calendar view' required /> + {taskError && ( + <span className="text-red-500 text-sm mt-1">{taskError}</span> + )}
Line range hint
57-64: Internationalize modal titleThe modal title is still hardcoded. Consider using the translation function for the title.
<Modal isOpen={isOpen} closeModal={closeModal} - title={'+ Add Time Entry'} + title={t('timesheet.ADD_TIME_ENTRY')} showCloseIcon className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:w-40 md:min-w-[30rem] justify-start h-[auto] overflow-y-auto" titleClass="font-bold flex justify-start w-full">apps/web/lib/features/integrations/calendar/table-time-sheet.tsx (2)
536-536: LGTM! Consider adding aria-label for accessibilityThe translation implementation looks good. Consider enhancing accessibility by adding an aria-label that uses the same translated text.
- <span>{t('common.CHANGE_STATUS')}</span> + <span aria-label={t('common.CHANGE_STATUS')}>{t('common.CHANGE_STATUS')}</span>
Line range hint
536-559: Enhance error handling with user feedbackThe current error handling only logs to console. Consider adding user feedback for failed status changes.
<DropdownMenuItem onClick={async () => { try { await updateTimesheetStatus({ status: status.label as TimesheetStatus, ids: [timesheet.timesheet.id] }); } catch (error) { console.error('Failed to update timesheet status:'); + // Add user notification + toast.error(t('common.STATUS_UPDATE_FAILED')); } }} key={index} textValue={status.label} className="cursor-pointer">apps/web/locales/zh.json (2)
22-23: Consider enhancing deletion confirmation messages.The current translations for deletion confirmations could be more specific to help users understand the consequences better.
- "DELETE_CONFIRMATION": "您确定要删除此项吗？", - "IRREVERSIBLE_ACTION_WARNING": "此操作不可逆。所有相关数据将丢失。", + "DELETE_CONFIRMATION": "您确定要删除此{item}吗？", + "IRREVERSIBLE_ACTION_WARNING": "警告：此操作不可撤销。删除后，所有相关的{type}数据将永久丢失。",This change:
- Adds a placeholder for the item type being deleted
- Makes the warning message more explicit about permanence
- Adds context about what type of data will be lost
27-32: Consider adding tooltips for better clarity.The new UI element translations might benefit from additional tooltip messages to provide more context to users.
"DATE_AND_TIME": "日期和时间", "NOTES": "备注", "CHANGE_STATUS": "更改状态", "TYPES": "类型", "LINK_TO_PROJECT": "链接到项目", - "SELECT_A_PROJECT": "选择一个项目", + "SELECT_A_PROJECT": "选择一个项目", + "DATE_AND_TIME_TOOLTIP": "设置任务的开始日期和时间", + "NOTES_TOOLTIP": "添加额外的任务相关信息", + "CHANGE_STATUS_TOOLTIP": "更改任务的当前状态", + "TYPES_TOOLTIP": "选择任务类型", + "LINK_TO_PROJECT_TOOLTIP": "将此任务关联到特定项目", + "SELECT_A_PROJECT_TOOLTIP": "从可用项目列表中选择"apps/web/locales/ar.json (1)
4-14: Consider adding placeholders for dynamic content in confirmation messages.The translations look good, but some messages might benefit from placeholders for dynamic content. For example:
DELETE_CONFIRMATIONcould include a placeholder for the item name being deletedIRREVERSIBLE_ACTION_WARNINGcould include specific data types that will be lostExample implementation:
-"DELETE_CONFIRMATION": "هل أنت متأكد أنك تريد الحذف؟", +"DELETE_CONFIRMATION": "هل أنت متأكد أنك تريد حذف {itemName}؟", -"IRREVERSIBLE_ACTION_WARNING": "هذا الإجراء لا رجعة فيه. ستفقد جميع البيانات ذات الصلة.", +"IRREVERSIBLE_ACTION_WARNING": "هذا الإجراء لا رجعة فيه. ستفقد {dataTypes} ذات الصلة.",apps/web/locales/en.json (1)
27-32: Consider consolidating similar project-related messages.The translations are clear and follow consistent capitalization. However, there might be an opportunity to optimize:
- "LINK_TO_PROJECT" and "SELECT_A_PROJECT" seem to serve similar purposes
- Consider consolidating these if they're used in similar contexts to maintain consistency in the UI
- "LINK_TO_PROJECT": "Link to Project", - "SELECT_A_PROJECT": "Select a Project", + "PROJECT_SELECTION": "Select Project",apps/web/locales/nl.json (1)
24-26: Consider a more natural Dutch phrasing for "ADD_ANOTHER_PERIOD".While the translations are generally good, "Voeg een andere periode toe" could be more naturally phrased as "Voeg nog een periode toe" to better match common Dutch usage.
- "ADD_ANOTHER_PERIOD": "Voeg een andere periode toe", + "ADD_ANOTHER_PERIOD": "Voeg nog een periode toe",apps/web/locales/pl.json (1)
28-32: Consider standardizing project-related translations.The translations are generally good, but there's a minor inconsistency in capitalization between "projekt" in
LINK_TO_PROJECTandSELECT_A_PROJECT. Consider standardizing for better consistency.- "LINK_TO_PROJECT": "Połącz z projektem", - "SELECT_A_PROJECT": "Wybierz projekt", + "LINK_TO_PROJECT": "Połącz z Projektem", + "SELECT_A_PROJECT": "Wybierz Projekt",apps/web/locales/it.json (1)
24-27: Consider clarifying the context of "periodo".While the translations are accurate, consider adding more context to "periodo" when used in shift timing. In Italian workplace terminology, you might want to specify "periodo di lavoro" or "periodo del turno" to be more explicit.
- "ADD_ANOTHER_PERIOD": "Aggiungi un altro periodo", - "REMOVE_PERIOD": "Rimuovi periodo", + "ADD_ANOTHER_PERIOD": "Aggiungi un altro periodo di lavoro", + "REMOVE_PERIOD": "Rimuovi periodo di lavoro",apps/web/locales/ru.json (1)
22-23: Consider adding a confirmation type indicator to deletion messages.The deletion confirmation messages could be more specific by indicating the type of item being deleted (e.g., task, period, etc.).
Consider this structure for more context-aware messages:
- "DELETE_CONFIRMATION": "Вы уверены, что хотите удалить это?", - "IRREVERSIBLE_ACTION_WARNING": "Это действие необратимо. Все связанные данные будут потеряны.", + "DELETE_CONFIRMATION": "Вы уверены, что хотите удалить {type}?", + "IRREVERSIBLE_ACTION_WARNING": "Это действие необратимо. Все связанные с {type} данные будут потеряны.",apps/web/locales/de.json (1)
22-32: LGTM! The German translations are accurate and well-structured.The translations maintain proper German grammar, punctuation, and formality while accurately conveying the meaning of the English text. They align well with the PR's objective of adding multi-language support for tasks, shift timing, and confirmation messages.
Consider adding a period at the end of the following messages for consistency with other confirmation/warning messages:
- "LINK_TO_PROJECT": "Projekt verlinken", - "SELECT_A_PROJECT": "Projekt auswählen", + "LINK_TO_PROJECT": "Projekt verlinken.", + "SELECT_A_PROJECT": "Projekt auswählen."
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (16)
apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx(9 hunks)apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx(1 hunks)apps/web/lib/features/integrations/calendar/table-time-sheet.tsx(2 hunks)apps/web/locales/ar.json(1 hunks)apps/web/locales/bg.json(1 hunks)apps/web/locales/de.json(1 hunks)apps/web/locales/en.json(1 hunks)apps/web/locales/es.json(1 hunks)apps/web/locales/fr.json(1 hunks)apps/web/locales/he.json(1 hunks)apps/web/locales/it.json(1 hunks)apps/web/locales/nl.json(1 hunks)apps/web/locales/pl.json(1 hunks)apps/web/locales/pt.json(1 hunks)apps/web/locales/ru.json(1 hunks)apps/web/locales/zh.json(1 hunks)
🔇 Additional comments (26)
apps/web/lib/features/integrations/calendar/table-time-sheet.tsx (1)
230-231: LGTM! Verify translation key availability
The translation keys follow good naming conventions and provide clear messaging for this critical dialog.
Let's verify that these translation keys exist in the language files:
✅ Verification successful
Translation keys are properly defined and available
Both translation keys common.DELETE_CONFIRMATION and common.IRREVERSIBLE_ACTION_WARNING are properly defined in all language files under apps/web/locales/ with appropriate translations for each supported language.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check if the translation keys exist in language files
# Expected: Files containing these keys, confirming their existence
rg "DELETE_CONFIRMATION|IRREVERSIBLE_ACTION_WARNING" -g "*.{json,ts,js}" -A 1
Length of output: 5773
apps/web/locales/zh.json (2)
22-32: LGTM! New translations follow the established patterns.
The new translations maintain consistent formatting and naming conventions.
24-26: Verify terminology consistency for time-related translations.
Please ensure these new time-related translations align with existing terminology in the application.
✅ Verification successful
Time-related translations are consistent with existing terminology
The new translations for "班次时间", "添加另一段时间", and "移除时间段" align well with the existing Chinese translations in the codebase. The search results show consistent usage of:
- "时间" for time-related terms (e.g., "开始时间", "结束时间", "总计时间")
- "班次" for shift-related terms (only one instance: "班次时间")
- Time periods using "时间段" pattern
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for existing time-related translations to verify consistency
rg -g '*.json' "时间|期间|班次" apps/web/locales/
Length of output: 2280
apps/web/locales/he.json (2)
Line range hint 1-1037: The overall file structure is well-organized and maintainable.
The translations are logically grouped into sections (common, pages, timer, etc.), making it easy to locate and maintain translations for different parts of the application. The consistent formatting and nesting structure enhance maintainability.
22-32: LGTM! The new translations are well-structured and properly formatted.
The added translations provide comprehensive Hebrew language support for task management, shift timing, and confirmation messages. The translations are properly nested under the "common" section and follow consistent formatting.
Let's verify the consistency of these translation keys across other language files:
✅ Verification successful
All translation keys are properly synchronized across language files
The verification shows that all the new translation keys added to the Hebrew (he.json) locale file are present and properly translated in all other language files (ar.json, bg.json, de.json, en.json, es.json, fr.json, it.json, nl.json, pl.json, pt.json, ru.json, zh.json). Each key has appropriate translations that maintain semantic equivalence while respecting the linguistic nuances of each language.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check if the new translation keys exist in other language files
# Expected: All language files should have the same keys for consistency
# Find all locale files
echo "Checking translation keys consistency across language files..."
for key in "DELETE_CONFIRMATION" "IRREVERSIBLE_ACTION_WARNING" "SHIFT_TIMING" "ADD_ANOTHER_PERIOD" "REMOVE_PERIOD" "DATE_AND_TIME" "NOTES" "CHANGE_STATUS" "TYPES" "LINK_TO_PROJECT" "SELECT_A_PROJECT"; do
echo "Checking key: common.$key"
for locale_file in $(fd -e json . apps/web/locales); do
jq -r ".common.$key // \"MISSING\"" "$locale_file"
done
done
Length of output: 24411
apps/web/locales/ar.json (1)
Line range hint 1-999: Verify translation key consistency across language files.
The Arabic translations are well-structured, but we should ensure that these new keys are also present in other language files to maintain consistency across the application.
✅ Verification successful
The script output shows that all the translation keys we checked are present in all language files (ar.json, bg.json, de.json, en.json, es.json, fr.json, he.json, it.json, nl.json, pl.json, pt.json, ru.json, zh.json) since no "Missing key" messages were reported. This means the translations are consistent across all language files.
Arabic translations are properly synchronized with other language files
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check if the new translation keys exist in all language files
# Expected results: All language files should contain the same translation keys
# Find all locale files
echo "Checking translation keys in all locale files..."
for locale_file in $(fd -e json . apps/web/locales); do
echo "Checking $locale_file"
# Check for the presence of new keys
for key in "DELETE_CONFIRMATION" "IRREVERSIBLE_ACTION_WARNING" "SHIFT_TIMING" "ADD_ANOTHER_PERIOD" "REMOVE_PERIOD" "DATE_AND_TIME" "NOTES" "CHANGE_STATUS" "TYPES" "LINK_TO_PROJECT" "SELECT_A_PROJECT"; do
if ! jq -e ".common.$key" "$locale_file" > /dev/null; then
echo "Missing key: $key in $locale_file"
fi
done
done
Length of output: 38762
apps/web/locales/en.json (2)
22-23: LGTM! Confirmation messages are clear and consistent.
The deletion confirmation messages follow the established pattern and properly convey the irreversible nature of the action.
24-26: LGTM! Verify usage of shift timing translations.
The shift timing related messages are clear and follow consistent capitalization. Let's verify that all UI components using these translations are updated.
✅ Verification successful
Translation keys are properly used in the codebase
The translation keys are correctly implemented in apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx where all three new translations (SHIFT_TIMING, ADD_ANOTHER_PERIOD, and REMOVE_PERIOD) are being used with the translation function t(). No other components require these translations.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Find components that might need these translations
# Look for components with "shift" or "period" in their name or content
# Search for potential UI components
rg -i -l "shift|period" --type tsx --type jsx
Length of output: 75
Script:
#!/bin/bash
# Search for potential UI components with different file extensions
rg -i -l "shift|period" --type ts --type js
# Also search for translation keys directly
rg -i "SHIFT_TIMING|ADD_ANOTHER_PERIOD|REMOVE_PERIOD" --type ts --type js
Length of output: 2590
apps/web/locales/nl.json (3)
22-23: LGTM: Confirmation message translations are clear and effective.
The Dutch translations for deletion confirmation and irreversible action warning are well-structured and follow proper UX patterns for confirmation dialogs.
27-32: LGTM: Task management translations are accurate and consistent.
The Dutch translations for task management features (notes, status changes, types, and project linking) are well-chosen and follow standard Dutch software terminology.
22-32: Verify the usage of new translation keys in the codebase.
Let's ensure all new translation keys are properly utilized in the components.
✅ Verification successful
All translation keys are properly used in the codebase
The verification shows that all translation keys in nl.json are actively used in the application:
DELETE_CONFIRMATION&IRREVERSIBLE_ACTION_WARNING- Used in table-time-sheet.tsx for deletion confirmation dialogsSHIFT_TIMING,ADD_ANOTHER_PERIOD,REMOVE_PERIOD,DATE_AND_TIME,NOTES,TYPES,LINK_TO_PROJECT,SELECT_A_PROJECT- Used in AddTaskModal.tsx for form labels and controlsCHANGE_STATUS- Used in table-time-sheet.tsx for status change dropdown
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check usage of new translation keys in the codebase
# Test: Search for usages of new translation keys. Expect: At least one usage per key.
echo "Checking translation key usage..."
for key in "DELETE_CONFIRMATION" "IRREVERSIBLE_ACTION_WARNING" "SHIFT_TIMING" "ADD_ANOTHER_PERIOD" "REMOVE_PERIOD" "DATE_AND_TIME" "NOTES" "CHANGE_STATUS" "TYPES" "LINK_TO_PROJECT" "SELECT_A_PROJECT"; do
echo "Checking key: $key"
rg "['\".]${key}['\"]" --type ts --type tsx
done
Length of output: 3987
Script:
#!/bin/bash
# Let's try a different approach without specifying file types
# Search for translation keys in all files
echo "Checking translation key usage..."
for key in "DELETE_CONFIRMATION" "IRREVERSIBLE_ACTION_WARNING" "SHIFT_TIMING" "ADD_ANOTHER_PERIOD" "REMOVE_PERIOD" "DATE_AND_TIME" "NOTES" "CHANGE_STATUS" "TYPES" "LINK_TO_PROJECT" "SELECT_A_PROJECT"; do
echo "=== Checking key: $key ==="
rg -l "['\".]${key}['\"]"
done
# Also let's check what file extensions we have in the codebase for TypeScript/JavaScript files
echo -e "\nChecking available TypeScript/JavaScript files:"
fd -e ts -e tsx -e js -e jsx
Length of output: 78749
Script:
#!/bin/bash
# Let's check for the actual usage of these translation keys in the codebase
# We'll search in all files without file type restrictions and include some context
echo "=== Checking translation key usages with context ==="
# Check for actual usages (not just in translation files)
for key in "DELETE_CONFIRMATION" "IRREVERSIBLE_ACTION_WARNING" "SHIFT_TIMING" "ADD_ANOTHER_PERIOD" "REMOVE_PERIOD" "DATE_AND_TIME" "NOTES" "CHANGE_STATUS" "TYPES" "LINK_TO_PROJECT" "SELECT_A_PROJECT"; do
echo -e "\n=== Checking key: $key ==="
rg -C 2 "['\".]${key}['\"]" --glob '!*.json'
done
Length of output: 10466
apps/web/locales/bg.json (3)
22-23: LGTM! Confirmation message translations are well-structured.
The translations for delete confirmation and irreversible action warning are clear and properly convey the message in Bulgarian.
24-32: LGTM! Task management translations are comprehensive.
The translations for shift timing, periods, task details, and project linking are accurate and maintain consistency with the existing translations.
22-32: Verify the translation key usage across components.
Let's confirm that these new translation keys are properly utilized in the mentioned components.
✅ Verification successful
Translation keys are properly utilized in the timesheet components
The verification confirms that the translation keys are being used correctly in the timesheet components:
AddTaskModal.tsxuses most of the translation keys:SHIFT_TIMING,ADD_ANOTHER_PERIOD,REMOVE_PERIOD,DATE_AND_TIME,NOTES,TYPES,LINK_TO_PROJECT,SELECT_A_PROJECT
table-time-sheet.tsxuses theCHANGE_STATUSkey
The translation keys are properly referenced using the translation function t() with the correct namespace common.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Search for the usage of new translation keys in components.
# Test: Expect to find these keys being used in AddTaskModal, EditTaskModal, and DataTableTimeSheet components.
echo "Searching for translation key usage in components..."
# Search for confirmation message keys
rg "common\.DELETE_CONFIRMATION|common\.IRREVERSIBLE_ACTION_WARNING" --type ts --type tsx
# Search for task management related keys
rg "common\.(SHIFT_TIMING|ADD_ANOTHER_PERIOD|REMOVE_PERIOD|DATE_AND_TIME|NOTES|CHANGE_STATUS|TYPES|LINK_TO_PROJECT|SELECT_A_PROJECT)" --type ts --type tsx
Length of output: 419
Script:
#!/bin/bash
# Let's try a different approach using ripgrep without file type restrictions
# First, let's find all potential React/TypeScript files
echo "Finding all potential React and TypeScript files..."
fd "\.(tsx?|jsx?)$"
echo -e "\nSearching for translation key usage..."
# Search for confirmation message keys
echo "Searching DELETE_CONFIRMATION and IRREVERSIBLE_ACTION_WARNING..."
rg "DELETE_CONFIRMATION|IRREVERSIBLE_ACTION_WARNING"
# Search for task management related keys
echo -e "\nSearching task management related keys..."
rg "SHIFT_TIMING|ADD_ANOTHER_PERIOD|REMOVE_PERIOD|DATE_AND_TIME|NOTES|CHANGE_STATUS|TYPES|LINK_TO_PROJECT|SELECT_A_PROJECT"
Length of output: 103933
Script:
#!/bin/bash
# Let's search specifically for the usage of these translation keys in the timesheet components
echo "Searching in timesheet components..."
rg -l "AddTaskModal|EditTaskModal|DataTableTimeSheet" --type ts --type tsx
echo -e "\nSearching for translation key usage in those files..."
rg "common\.(SHIFT_TIMING|ADD_ANOTHER_PERIOD|REMOVE_PERIOD|DATE_AND_TIME|NOTES|CHANGE_STATUS|TYPES|LINK_TO_PROJECT|SELECT_A_PROJECT)" apps/web/lib/features/integrations/calendar/ apps/web/app/\[locale\]/timesheet/
Length of output: 1800
apps/web/locales/pl.json (2)
22-23: LGTM: Confirmation messages are clear and follow UX best practices.
The translations for delete confirmation and irreversible action warning are well-written and effectively convey the severity of the actions.
24-27: LGTM: Time management translations are consistent and user-friendly.
The translations for shift timing and period management are clear, concise, and maintain consistency with the application's terminology.
apps/web/locales/it.json (3)
22-23: LGTM: Clear and accurate deletion warning messages.
The translations effectively convey the warning messages while maintaining proper Italian grammar and formality.
28-32: LGTM: Professional and clear task management terminology.
The translations effectively use standard Italian project management terminology while maintaining clarity and professionalism.
22-32: Verify usage of new translation keys.
Let's ensure that all newly added translation keys are properly utilized in their respective components.
✅ Verification successful
Translation keys are properly integrated and used across the application
The verification shows that all translation keys are actively used in the codebase:
- Delete confirmation keys are used in
apps/web/lib/features/integrations/calendar/table-time-sheet.tsx - Shift timing related keys are used in
apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx - Task management keys are used across multiple components including timesheet, kanban, and task description components
The keys are also consistently present across all language files in both web and desktop applications, ensuring proper internationalization support.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for the usage of new translation keys in the codebase.
# Look for translation key usage in component files.
echo "Checking translation key usage..."
# Search for delete confirmation usage
rg -l "DELETE_CONFIRMATION|IRREVERSIBLE_ACTION_WARNING" "apps/web/src"
# Search for shift timing related keys
rg -l "SHIFT_TIMING|ADD_ANOTHER_PERIOD|REMOVE_PERIOD" "apps/web/src"
# Search for task management related keys
rg -l "DATE_AND_TIME|NOTES|CHANGE_STATUS|TYPES|LINK_TO_PROJECT|SELECT_A_PROJECT" "apps/web/src"
Length of output: 471
Script:
#!/bin/bash
# Let's first find the correct source directory structure
echo "Finding source directories..."
fd -t d "src"
# Then search for translation keys in all files
echo -e "\nSearching for translation key usage..."
rg -l "DELETE_CONFIRMATION|IRREVERSIBLE_ACTION_WARNING"
echo -e "\nSearching for shift timing related keys..."
rg -l "SHIFT_TIMING|ADD_ANOTHER_PERIOD|REMOVE_PERIOD"
echo -e "\nSearching for task management related keys..."
rg -l "DATE_AND_TIME|NOTES|CHANGE_STATUS|TYPES|LINK_TO_PROJECT|SELECT_A_PROJECT"
Length of output: 3470
apps/web/locales/ru.json (1)
22-32: LGTM! The Russian translations are well-structured and grammatically correct.
The new translations provide clear and idiomatic Russian text for task management, shift timing, and confirmation messages.
Let's verify the consistency of these translations across other language files and their usage in the components:
✅ Verification successful
The previous results showed that all translation keys are present across language files, but we need to verify their actual usage in components. The component paths in the initial search were incorrect, so let's find the actual component files and their usage of these translations.
The previous results showed that all translation keys are consistently present across all language files. Now let's verify their actual usage in the timesheet components we found.
The Russian translations are consistent and properly integrated in the codebase
The verification shows that:
- All translation keys are present across all language files (ar, bg, de, en, es, fr, he, it, nl, pl, pt, zh)
- The translations are actively used in the timesheet components:
- AddTaskModal.tsx uses
LINK_TO_PROJECT,SELECT_A_PROJECT,NOTES,DATE_AND_TIME,SHIFT_TIMING,ADD_ANOTHER_PERIOD,REMOVE_PERIOD - EditTaskModal.tsx and TimeSheetFilterPopover.tsx use related translations for their functionality
- AddTaskModal.tsx uses
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify translation key consistency across language files and their usage in components
# Check if all new keys exist in other language files
echo "Checking translation key consistency across language files..."
for key in "DELETE_CONFIRMATION" "IRREVERSIBLE_ACTION_WARNING" "SHIFT_TIMING" "ADD_ANOTHER_PERIOD" "REMOVE_PERIOD" "DATE_AND_TIME" "NOTES" "CHANGE_STATUS" "TYPES" "LINK_TO_PROJECT" "SELECT_A_PROJECT"; do
for lang in ar bg de en es fr he it nl pl pt zh; do
rg -l "\"${key}\"" "apps/web/locales/${lang}.json" || echo "Missing key ${key} in ${lang}.json"
done
done
# Verify usage in components mentioned in the AI summary
echo "Checking translation key usage in components..."
rg -A 2 "useTranslation|t\(" "apps/web/components/AddTaskModal.tsx" "apps/web/components/EditTaskModal.tsx" "apps/web/components/DataTableTimeSheet.tsx"
Length of output: 19634
Script:
#!/bin/bash
# Let's search for the actual component files and their usage of translations
echo "Searching for task and timesheet related components..."
fd -e tsx -e ts "Task|TimeSheet|Period" "apps/web"
echo -e "\nSearching for translation key usage in the codebase..."
rg -A 2 "\"(DELETE_CONFIRMATION|IRREVERSIBLE_ACTION_WARNING|SHIFT_TIMING|ADD_ANOTHER_PERIOD|REMOVE_PERIOD|DATE_AND_TIME|NOTES|CHANGE_STATUS|TYPES|LINK_TO_PROJECT|SELECT_A_PROJECT)\""
Length of output: 32834
Script:
#!/bin/bash
# Let's check the actual usage of these translation keys in the timesheet components
echo "Checking translation usage in timesheet components..."
rg -A 2 "useTranslation|t\(" "apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx" "apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx" "apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx"
echo -e "\nChecking imports in these components..."
rg "^import.*from" "apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx" "apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx" "apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx"
Length of output: 21598
apps/web/locales/pt.json (1)
22-33: LGTM! The Portuguese translations are well-structured and accurate.
The translations are grammatically correct and maintain a consistent formal tone appropriate for a business application.
Let's verify the consistency of these translations across other language files:
✅ Verification successful
All translations are consistent across language files
The verification shows that all the new Portuguese translations in lines 22-33 have corresponding entries in other language files (en, es, fr, de, it, nl, pl, ru, zh, he, ar, bg). The translations maintain consistent meaning and formatting across all languages, with each key properly represented. The Portuguese translations accurately reflect the same concepts as their counterparts in other languages.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check if the same keys exist in other language files
# and compare their structure for consistency
# Find all language files
echo "Checking language files for consistency..."
for key in "DELETE_CONFIRMATION" "IRREVERSIBLE_ACTION_WARNING" "SHIFT_TIMING" "ADD_ANOTHER_PERIOD" "REMOVE_PERIOD" "DATE_AND_TIME" "NOTES" "CHANGE_STATUS" "TYPES" "LINK_TO_PROJECT" "SELECT_A_PROJECT" "TASK_TIME"; do
echo "Checking key: $key"
# Search for the key in all JSON files in the locales directory
fd -e json . "apps/web/locales" -x jq -r ".common.$key // empty" {}
done
Length of output: 7329
apps/web/locales/es.json (4)
22-23: LGTM! Confirmation and warning messages are properly translated.
The Spanish translations for delete confirmation and irreversible action warning are clear, professional, and maintain a consistent formal tone.
24-27: LGTM! Shift timing related translations are accurate.
The translations for shift timing, period management, and date/time are properly localized and maintain consistency with the application's terminology.
28-32: LGTM! Task management translations are well structured.
The translations for notes, status changes, types, and project linking maintain proper Spanish business terminology and are consistently formatted.
22-32: Verify translations in UI context.
While the translations are linguistically correct, it would be good to verify them in the actual UI context to ensure they fit within the available space and maintain visual consistency.
✅ Verification successful
UI translations have been verified in their proper context
Based on the code analysis, the translations are appropriately used in their UI contexts:
- "DELETE_CONFIRMATION" and "IRREVERSIBLE_ACTION_WARNING" are used in the AlertDialogConfirmation component with proper spacing and layout
- "SHIFT_TIMING" is used as a section header with appropriate font weight and spacing
- "ADD_ANOTHER_PERIOD" and "REMOVE_PERIOD" are used as button text with proper styling and hover states
- "DATE_AND_TIME" is used as a label with proper alignment and required field indicator
- "NOTES" is used as a textarea label with character count and validation
- "CHANGE_STATUS" is used in a dropdown menu item with proper spacing
- "TYPES" is used as a label with required field indicator and proper alignment
- "LINK_TO_PROJECT" and "SELECT_A_PROJECT" are used in the project selection field with proper placeholder handling
The translations fit well within their UI components and maintain visual consistency across the interface.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Find components using these translations to verify UI context
# Search for components using these translation keys
echo "Searching for components using new translation keys..."
rg -l "common\.(DELETE_CONFIRMATION|IRREVERSIBLE_ACTION_WARNING|SHIFT_TIMING|ADD_ANOTHER_PERIOD|REMOVE_PERIOD|DATE_AND_TIME|NOTES|CHANGE_STATUS|TYPES|LINK_TO_PROJECT|SELECT_A_PROJECT)"
# Search for test files that might need updating
echo "Searching for translation-related test files..."
fd -g "*translation*.test.*" -g "*i18n*.test.*"
Length of output: 697
Script:
#!/bin/bash
# Let's examine the components that use these translations to understand their UI context
# Check the content of the first file
echo "Content of table-time-sheet.tsx:"
cat "apps/web/lib/features/integrations/calendar/table-time-sheet.tsx"
echo -e "\nContent of AddTaskModal.tsx:"
cat "apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx"
Length of output: 39448
apps/web/locales/fr.json (1)
22-32: LGTM! The new translation entries are well-formatted and linguistically accurate.
The added French translations maintain proper grammar, accents, and natural language flow while accurately conveying the intended meanings of the UI elements.
Let's verify that these new keys exist in other language files for consistency:
✅ Verification successful
Let me verify the actual content of these translations to ensure they are properly synchronized.
Let me try a different approach with proper jq syntax:
The translations are properly synchronized across all language files
The verification shows that all the key translation entries are present across all language files (ar, bg, de, en, es, fr, he, it, nl, pl, pt, ru, zh) and each translation is linguistically appropriate for its target language. The translations maintain consistent meaning while respecting the grammatical structures and cultural nuances of each language.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check if the new translation keys exist in other language files
# Expected: All keys should be present in other language files to ensure complete translations
# Find all locale files
fd -e json -d 1 . apps/web/locales/ --exec sh -c '
echo "=== Checking $1 ==="
for key in "DELETE_CONFIRMATION" "IRREVERSIBLE_ACTION_WARNING" "SHIFT_TIMING" "ADD_ANOTHER_PERIOD" "REMOVE_PERIOD" "DATE_AND_TIME" "NOTES" "CHANGE_STATUS" "TYPES" "LINK_TO_PROJECT" "SELECT_A_PROJECT"; do
if ! jq -e ".common.$key" "$1" > /dev/null; then
echo "Missing key: $key"
fi
done
' sh {}
Length of output: 941
Script:
#!/bin/bash
# Check the actual content of these specific keys across all locale files
for key in "DELETE_CONFIRMATION" "IRREVERSIBLE_ACTION_WARNING" "SHIFT_TIMING"; do
echo "=== Checking key: $key ==="
fd -e json -d 1 . apps/web/locales/ --exec sh -c "jq -r '.common.$1 // \"MISSING\"' {}" sh "$key"
done
Length of output: 7847
Script:
#!/bin/bash
# Check content of specific keys across locale files
echo "Checking translation keys across locale files:"
fd -e json -d 1 . apps/web/locales/ --exec sh -c '
echo "\n=== File: $1 ==="
jq -r ".common | select(.) | {DELETE_CONFIRMATION, IRREVERSIBLE_ACTION_WARNING, SHIFT_TIMING}" "$1"
' sh {}
Length of output: 3421
apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
Outdated
Show resolved
Hide resolved
Description
Please include a summary of the changes and the related issue.
Type of Change
Checklist
Previous screenshots
Please add here videos or images of previous status
Current screenshots
Please add here videos or images of previous status
Summary by CodeRabbit
Release Notes
New Features
Improvements
Localization Updates