Fix api calls problem (Next.js / Supabase DB)

Job ID: 34015787

Budget: £20 – £250 GBP

I am having problems with displaying data generated from API calls. To talk you through the user journey of the app see below. (attached is a schema and one of the tables and an error message).

I have an array of `orders` objects across some tables, filtered by `tracker_status` (not started, in progress etc). It contains number id values (i.e. foreign keys) for other objects (e.g. tasks.filter(task => task.id == order.work_task_id )[0].name). I think the current architecture is causing problems to provide the name, and possibly causing memory leak. Sometimes data doesn't load on refresh and I'm not confident in the use of useState calls currently. Please start reply with "hola ed" so I know you have read this.

Also be prepared as the codebase is not very clean in terms of variable names and best practices, it's a rush to the deadline with a lot of amateur contributions.

I need to have safe, easy to use and reliable architecture and implement best practice.