Table fixes

[sumansaurabh]

Description

• Enhanced API table to include updatedAt field for better tracking of API key usage.
• Added a new Payments History page and navigation link in the profile section.
• Improved user profile reload logic to be more efficient.
• Updated translations for new UI elements and improved clarity in prompts.

---

Changes walkthrough 📝

	Relevant files
Enhancement	App.tsx Refactor user profile reload logic                                              src/App.tsx Modified user profile reload logic to only trigger when a user is present. Improved dependency array in useEffect for better performance. +3/-4      apiToken.api.ts Add updatedAt field to API table rows                                        src/api/apiToken.api.ts Added updatedAt field to ApiTableRow for tracking last updated time. Adjusted API token data handling to include the new field. +9/-5      ApiKeysTable.tsx Enhance API Keys Table with lastUsed column                            src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx Introduced lastUsed column to display the updatedAt date. Simplified pagination handling and removed unnecessary state. +28/-43  ProfileFormNav.tsx Add Payments History navigation                                                    src/components/profile/profileCard/profileFormNav/ProfileFormNav.tsx Added navigation for Payments History. Updated routing to include Payments History page. +6/-0      PaymentsHistoryPage.tsx Implement Payments History page                                                    src/pages/DashboardPages/PaymentHistoryPage/PaymentsHistoryPage.tsx Created new Payments History page component. Integrated translation for page title. +17/-0
Documentation	translation.json Update translations for new features                                          src/locales/en/translation.json Updated translation keys for clarity. Added new translation for "Last Used" and "Transactions History". +5/-3

---

💡 Penify usage:
Comment /help on the PR to get a list of all available Penify tools and their descriptions

[penify-dev]

PR Review 🔍

⏱️ Estimated effort to review [1-5]	4, because the PR introduces multiple enhancements across various files, including a new page and significant logic changes. The complexity of ensuring all new features work seamlessly together requires careful review.
🧪 Relevant tests	No
⚡ Possible issues	Possible Bug: The logic for fetching API table data has been altered, which could introduce issues if the pagination logic is not handled correctly.
	Possible Bug: The updatedAt field is added but not validated or handled in the API responses; ensure that the backend supports this field.
🔒 Security concerns	No

[penify-dev]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible bug	Add error handling to the API data fetching logic Ensure that the fetchData function handles errors from the API call to avoid unhandled promise rejections and provide feedback to the user. src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx [29-33] getApiTableData().then((res) => { if (isMounted.current) { setTableData({ data: res.data, loading: false }); } +}).catch((error) => { + if (isMounted.current) { + notification.error({ message: t('apiTable.fetchError', { error: error.message }) }); + setTableData((prev) => ({ ...prev, loading: false })); + } }); Suggestion importance[1-10]: 9 Why: This suggestion addresses a critical issue of unhandled promise rejections, which can lead to application crashes. Adding error handling improves user experience by providing feedback in case of API failures.	9
Maintainability	Use functional updates for setTableData to avoid stale state issues The setTableData calls should ensure that the state is updated correctly to avoid potential stale state issues. src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx [31] -setTableData({ data: res.data, loading: false }); +setTableData((prev) => ({ ...prev, data: res.data, loading: false })); Suggestion importance[1-10]: 8 Why: Using functional updates for state management is a best practice that helps prevent stale state issues, making the code more reliable and maintainable.	8
	Add the new translation key to the English file to match the German file Ensure that the new translation keys are added consistently in both language files. src/locales/en/translation.json [7] +"lastUsed": "Last Used", - Suggestion importance[1-10]: 8 Why: This suggestion is valid as it addresses the need to add the "lastUsed" key to the English translation file, ensuring consistency with the German file.	8
	Add a translation for the new key to maintain consistency across languages Ensure consistency in the translation keys by using the same naming conventions across different languages. src/locales/de/translation.json [7] -"lastUsed": "Last Used", +"lastUsed": "Zuletzt verwendet", Suggestion importance[1-10]: 3 Why: While adding a translation for "lastUsed" is important for consistency, the suggestion does not address any critical issues in the existing code.	3
	Standardize the translation for "paymentHistory" to maintain consistency Ensure that the translation for "paymentHistory" is consistent with the German translation. src/locales/en/translation.json [343] -"paymentHistory": "Transactions History", +"paymentHistory": "Payment History", Suggestion importance[1-10]: 3 Why: The suggestion to change "paymentHistory" to "Payment History" does not align with the new key added in the German file, which is "Transactions History", making this suggestion less relevant.	3
Correctness	Fix the typo in the error message for clarity Correct the typo in the translation key for better clarity and accuracy. src/locales/de/translation.json [17] -"toggleMessageErr": "Failed to update API Key. Please try again later!" +"toggleMessageErr": "Fehler beim Aktualisieren des API-Schlüssels. Bitte versuchen Sie es später erneut!" Suggestion importance[1-10]: 8 Why: This suggestion correctly identifies a typo in the error message and proposes a more accurate translation, which improves clarity and correctness.	8
Possible issue	Ensure the fetch dependency is properly defined or removed The fetch dependency in the useEffect should be defined or removed to avoid potential issues with undefined references. src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx [38] -}, [fetch]); +}, []); // or define fetch function if needed Suggestion importance[1-10]: 7 Why: This suggestion is important to ensure that the useEffect hook behaves correctly. Defining or removing the dependency can prevent potential bugs related to undefined references.	7
Best practice	Validate the rowId in the handleToggleRow function to ensure it is valid The handleToggleRow function should validate the rowId before proceeding to ensure it is a valid ID. src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx [60] -if (rowId === -1) { +if (rowId < 0) { handleCreateRow(); return; } Suggestion importance[1-10]: 6 Why: Validating the rowId enhances the robustness of the function. While it's a good practice, it does not address a critical issue, hence the moderate score.	6