Table fixes

[sumansaurabh]

Description

• Added updatedAt field to API token data structure for better tracking.
• Refactored API keys table to simplify pagination and improve loading states.
• Introduced a new payment history page to display user transactions.
• Enhanced user profile management with improved data fetching logic.

---

Changes walkthrough 📝

	Relevant files
Enhancement	apiToken.api.ts Enhance API Token Data Structure                                                  src/api/apiToken.api.ts Added updatedAt field to ApiTableRow. Updated logic for handling API token data. +9/-5      PaymentHistory.tsx Add Payment History Functionality                                                src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/PaymentHistory/PaymentHistory.tsx Integrated payment history fetching. Updated rendering logic for payment history. +10/-8    userSlice.ts Enhance User Profile Management                                                    src/store/slices/userSlice.ts Added fetchUserProfile function to reload user data. Improved user state management. +13/-1    PaymentsHistoryPage.tsx Create Payment History Page                                                            src/pages/DashboardPages/PaymentHistoryPage/PaymentsHistoryPage.tsx Created new page for displaying payment history. Integrated translation for page title. +17/-0
Refactor	ApiKeysTable.tsx Refactor API Keys Table Logic                                                        src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx Simplified pagination handling. Improved loading state management. Adjusted data fetching logic. +28/-43

---

💡 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 new components, refactors existing logic, and modifies several files, which increases the complexity of the review process.
🧪 Relevant tests	No
⚡ Possible issues	Possible Bug: The fetchUserProfile function is called with user as an argument, but it may not be defined at the time of the call, which could lead to unexpected behavior.
	Possible Bug: The PaymentsHistory route is added, but there is no indication of how it integrates with the existing payment system. Ensure that the routing and data fetching are correctly implemented.
🔒 Security concerns	No

[penify-dev]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible issue	Add validation to the progress prop to ensure it stays within the expected range Ensure that the progress prop passed to ProgressOverlay is properly validated to avoid potential runtime errors if it is not a number or is out of the expected range (0-100). src/components/dashboard/DashboardTerminal/DocumentationCard.tsx [547] -<ProgressOverlay progress={isStarted.percentage} /> +<ProgressOverlay progress={Math.max(0, Math.min(100, isStarted.percentage))} /> Suggestion importance[1-10]: 9 Why: Adding validation for the progress prop is crucial to prevent runtime errors, especially since it is derived from isStarted.percentage, which may not always be within the expected range.	9
	Validate the rowId in the handleToggleRow function to prevent invalid API calls The handleToggleRow function should validate the rowId before calling toggleApiToken to avoid unnecessary API calls with invalid IDs. src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx [60-62] -if (rowId === -1) { - handleCreateRow(); +if (rowId < 0) { + notification.error({ message: t('apiTable.invalidRowId') }); return; } Suggestion importance[1-10]: 7 Why: Validating the rowId is important to prevent unnecessary API calls, but the impact is less critical than error handling in the previous suggestion.	7
Possible bug	Add error handling to the API data fetching logic Ensure that the fetchData function handles errors from the API call to prevent 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 }); - } -}); +getApiTableData() + .then((res) => { + if (isMounted.current) { + setTableData({ data: res.data, loading: false }); + } + }) + .catch((error) => { + 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 by adding error handling to the API call, which is essential for preventing unhandled promise rejections and improving user feedback.	9
	Correct the spelling of the state setter function Ensure that the setSwithState function is correctly spelled as setSwitchState to avoid potential reference errors. src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/PaymentPricing.tsx [83] -<BaseSwitch checked={switchState} onChange={() => setSwithState(!switchState)} /> +<BaseSwitch checked={switchState} onChange={() => setSwitchState(!switchState)} /> Suggestion importance[1-10]: 9 Why: Correcting the spelling of the state setter function addresses a potential bug that could lead to reference errors in the component.	9
	Add a null check for the user object before dispatching the fetchUserProfile action Ensure that the fetchUserProfile function is only called when the user object is not null or undefined to avoid potential errors. src/components/layouts/main/MainLayout/MainLayout.tsx [22] -dispatch(fetchUserProfile(user)); +if (user) { + dispatch(fetchUserProfile(user)); +} Suggestion importance[1-10]: 9 Why: This suggestion addresses a potential bug by ensuring that the fetchUserProfile function is not called with a null or undefined user, which could lead to runtime errors.	9
	Add a default value to the requiresPremiumAccess prop to avoid potential undefined errors Ensure that the requiresPremiumAccess prop is defined and has a default value to prevent potential undefined errors. src/components/dashboard/DashboardTerminal/DocumentationCard.tsx [427-429] const triggerDocStringGen = useCallback(() => { - if (requiresPremiumAccess) { + if (requiresPremiumAccess ?? false) { Suggestion importance[1-10]: 8 Why: Adding a default value for requiresPremiumAccess helps prevent potential undefined errors, which is important for maintaining robust code.	8
Best practice	Eliminate the console log to prevent unnecessary logging in production Remove the console log statement in triggerDocStringGen to avoid cluttering the console in production environments. src/components/dashboard/DashboardTerminal/DocumentationCard.tsx [428] -console.log('triggerDocStringGen', requiresPremiumAccess); +// console.log('triggerDocStringGen', requiresPremiumAccess); Suggestion importance[1-10]: 7 Why: Removing the console log is a good practice to keep the production environment clean, although it is not critical for functionality.	7
	Update the key property to be more descriptive and clear Ensure that the key property in ApiTableRow is unique and descriptive to avoid confusion in the data structure. src/api/apiToken.api.ts [56] -key: "No API key found, please click on 'Create' button to generate one.", +key: "No API key available, please create one.", Suggestion importance[1-10]: 6 Why: Updating the key property to be more descriptive enhances clarity in the data structure, which is beneficial for maintainability.	6
	Eliminate the console.log statement to improve code cleanliness Remove the console.log statement to clean up the code and avoid unnecessary logging in production. src/components/layouts/main/MainLayout/MainLayout.tsx [21] -console.log('user', user); +// console.log('user', user); Suggestion importance[1-10]: 6 Why: Eliminating console logs is a good practice for code cleanliness, especially in production, but it does not address a critical issue, hence a moderate score.	6
	Use functional updates in setTableData to ensure state updates correctly The setTableData calls in the handleCreateRow and handleToggleRow functions should ensure that the state is updated correctly by using functional updates to avoid stale closures. src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx [46-49] setTableData((prev) => ({ ...prev, - data: updatedData, + data: [...prev.data, updatedData], })); Suggestion importance[1-10]: 5 Why: While using functional updates is a good practice for state management, this suggestion addresses a minor improvement rather than a critical issue.	5
Maintainability	Use a styled component for the warning message instead of inline styles Replace the inline style for the warning message with a styled component or CSS class for better maintainability and separation of concerns. src/components/coupons/Coupons.tsx [29] -<span style={{ color: '#ffa500' }}>{t('common.addEmailWarning')}</span> +<WarningMessage>{t('common.addEmailWarning')}</WarningMessage> Suggestion importance[1-10]: 7 Why: Using a styled component instead of inline styles improves maintainability and adheres to best practices for styling in React.	7
	Ensure the render function in the columns definition handles undefined values for text The columns definition should ensure that the render function for each column handles potential null or undefined values for text to avoid rendering issues. src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx [107-108] -render: (text: string, record) => { - return record.isActive ?<span>{text}</span> : <span style={{ color: '#cccccc82' }}>{text}</span>; +render: (text: string | undefined, record) => { + return record.isActive ? <span>{text || 'N/A'}</span> : <span style={{ color: '#cccccc82' }}>{text || 'N/A'}</span>; }, Suggestion importance[1-10]: 6 Why: This suggestion improves maintainability by handling potential null or undefined values, but it does not address a major bug or security concern.	6
Enhancement	Improve button label clarity for better user understanding Consider using a more descriptive label for the buttons in the modal to improve user experience and clarity. src/components/dashboard/DashboardTerminal/DocumentationCard.tsx [586-587] -Buy Pro(25$) +Buy Pro for $25 Suggestion importance[1-10]: 6 Why: Improving button label clarity enhances user understanding, but this is a minor enhancement compared to functional changes.	6
	Modify the box-shadow values for a more consistent visual effect Adjust the box-shadow values to create a more consistent visual effect across different states of the table. src/components/common/BaseTable/BaseTable.styles.ts [18-19] box-shadow: - 6px 6px 12px rgba(0, 0, 0, 0.3), - -6px -6px 12px rgba(255, 255, 255, 0.05); + 4px 4px 8px rgba(0, 0, 0, 0.2), + -4px -4px 8px rgba(255, 255, 255, 0.1); Suggestion importance[1-10]: 5 Why: While adjusting box-shadow values can enhance visual consistency, this suggestion is more of an aesthetic improvement rather than a critical fix.	5
Performance	Include a cleanup function in the useEffect to handle component unmounting properly Consider adding a cleanup function in the useEffect to prevent memory leaks if the component unmounts while the fetch is in progress. src/components/layouts/main/MainLayout/MainLayout.tsx [20-23] useEffect(() => { console.log('user', user); dispatch(fetchUserProfile(user)); + return () => { + // Cleanup logic if necessary + }; }, [user, dispatch]); Suggestion importance[1-10]: 5 Why: While adding a cleanup function is a good practice, the current implementation does not show any immediate memory leak issues, making this suggestion less critical.	5
	Optimize the toggleSider function using useCallback to enhance performance Consider using useCallback for the toggleSider function to prevent unnecessary re-creations on every render. src/components/layouts/main/MainLayout/MainLayout.tsx [26] -const toggleSider = () => setSiderCollapsed(!siderCollapsed); +const toggleSider = useCallback(() => setSiderCollapsed(prev => !prev), []); Suggestion importance[1-10]: 4 Why: Using useCallback can optimize performance, but the toggleSider function is simple and unlikely to cause significant performance issues, making this a minor suggestion.	4