Responsive web app, bottom tabs for secondary navigation or primary actions?

I'm building a web app that I need to be fully functional for all devices, so I've built it from the ground-up as a mobile-first responsive web app.

I already use a hamburger and left nav for main navigation, because there are too many main pages to put down on a bottom nav. One of the major pages, Transactions, has sub-pages that I use tabs at the top for:

The status "Prospect", date "Aug 1", and icons are buttons on the top-right for common actions the user does. The status and date are buttons that bring up form fields so they can easily change those values.

However, when I scale the site down to mobile, there's obviously not enough space at the top for all these items, so I leave the tabs and move the actions to the overflow menu:

However, the user now has to click the menu to see the values for the status and date, and that's useful info they want to see all the time.

I'm thinking about adding a "bottom nav" section that has the main actions such as state and date changing.

That way the tabs remain at top where they are, and when you're on desktop, you have the 2 quick buttons at top (status/date), but when you're on mobile they move to the bottom and resemble 2 tabs (even though they are just buttons).

I can't think of another interface to present all the relevant information. If I put it in the main scrolling area, the user loses the data once they start scrolling, and this toolbar will be mostly the same across all 4 tabs (only main section is different).

Does anyone have suggestions for how to present the information, or if using the bottom section for "actions" like I'm thinking is a good/bad idea? I'm loosely basing my UI off Material Design, but am all about a better experience for my users rather than strict adherence to the specs.