User permission development guide.

Given the below admin page layout structure

admin
├── _middleware.ts
├── company
│   ├── edit
│   │   └── [id].tsx
│   └── index.tsx
├── dashboard.tsx
├── group
│   ├── edit
│   │   └── [id].tsx
│   └── index.tsx
├── maps.js
├── repo
│   ├── edit
│   │   └── [id].tsx
│   └── index.tsx
├── sss_auth.tsx
├── tables.js
└── user
    ├── edit
    │   └── [id].tsx
    └── index.tsx

To access admin level, you must have a valid session.

To access admin/user/index.tsx you must have a valid session, company and role. To access admin/user/[id].tsx you must have a valid session.

To access admin/[!user] you must have a valid session, company and role.

Ideally _middleware.ts will control these default page access requirements ... but there are challenges as _middleware.ts is executed before page render so react hooks are not available ... so I don't have access to session.

this seems to be addressed here: https://next-auth.js.org/configuration/nextjs#middleware but initial attempts to get it working failed.

using getSession in getLayout() in /pages/_app.tsx also failed as apparently getLayout() is called before Session is established and hooks are out of order.

Next steps, get /admin/user, and /admin/company working without authentication ... worst case, I add something to protect each page ... ugh!