Let me investigate the payment certificates page to fix the issue with adding new certificates:

Now let me check if there's a create page:

I found the issue! The problem is in the create page where the certificate data is generated with a random ID and random certificate number, but the main payment certificates page loads from mock data in useEffect, not from localStorage. When a user creates a new certificate, it's saved to localStorage, but the listing page doesn't read from localStorage - it only shows the hardcoded mock data.

Let me fix both files to properly sync the data:

I've fixed the payment certificate storage issue by making the listing page load certificates from localStorage instead of only using hardcoded mock data, and improved the certificate number generation to be properly sequential based on existing certificates. The refresh button now reloads the data from localStorage, and when variations are added, they're also persisted to localStorage, ensuring all changes are saved and displayed correctly.

I can see the issue. In the fetchContractLines function, it's trying to call .find() on cert.lines, but cert.lines might be undefined if the stored certificate doesn't have the lines property. This happens when the function tries to access cert.lines.find() on line 67. Let me fix this:

I've fixed the error by adding a null/undefined check for cert.lines before calling the .find() method. The code now verifies that cert.lines exists and is an array before attempting to search through it, preventing the "Cannot read properties of undefined" error when accessing older payment certificates that might not have the lines structure.