Edit UI: Use VueRouter's navigation guards to prohibit non-staff users from accessing staff routes

## TODOs
- [ ] Add navigation guard to edit-ui
- [ ] Add navigation guard to create-ui
- [ ] Remove old code
- [ ] Create fallback page

## What is the problem?
At present, we're duplicating the code that checks that only staff can access specific pages. For example, code like this is duplicated on all staff-only pages:

```javascript
// do not proceed if user is not staff
const isStaffOnly = this.$route.matched.some(r => r.meta?.isStaffOnly)
if (isStaffOnly && !this.isRoleStaff) {
window.alert('Only staff can convert a record.')
this.$root.$emit('go-to-dashboard', true)
return
}
```

## What is the impact?
Code is duplicated on each view which increases the chance of a setup error. It would be better to have the routes guarded by VueRouter so the code only has to be written once.

## Proposed solution
Extend the following navigation guard to check not only that the user is authenticated, but also that users must have a staff role for routes labeled as `isStaffOnly: true`

```javascript
router.beforeEach((to, from, next) => {
if (requiresAuth(to) && !isAuthenticated()) {
// this route needs authentication, so re-route to signin
// NB: save current route for future redirect
next({
name: 'signin',
query: { redirect: to.fullPath }
})
} else {
// otherwise just proceed normally
next()
}
})
```

Start by locating the edit-ui and create-ui route definitions and the existing router.beforeEach authentication guard. Review the duplicated isStaffOnly checks and route metadata, then verify that staff-only routes are guarded, non-staff users reach the fallback page, and the old per-view checks are removed.

Written by the indexing model from the issue text.