No description
Dave
edc9f3da74
Adds a Settings > Users screen where members can be added, turned off
and removed, and fixes three defects found while auditing the app on
a phone.
User management
- Settings is a real page with a Users section: add a member (name,
email, password), flip "Can sign in" to block or restore access
without deleting their history, or remove them outright.
- The app has no roles - membership is just the active flag - so the
Settings route no longer requires the "admin" role, which left it
unreachable for every real member. Settings is now in the sidebar.
- New members are created with active: true. AuthContext refuses to
sign in a user whose active flag is false, and the field had no
default, so previously created users were locked out of the app.
Live PocketBase rules for the `users` collection (see
scripts/fix-users-collection.mjs):
- createRule was "" which means PUBLIC - any anonymous visitor could
create an account on the instance. It now requires an authenticated
member.
- listRule was "id = @request.auth.id", so a member could only ever
see their own record and no member list could be rendered. It now
matches every other collection in the app: @request.auth.id != "".
Totals always showed R0.00
- form.watch("items") returns the same array instance that
react-hook-form mutates in place, so the useMemo keyed on it never
recomputed. Both the quote and purchase order totals stayed at zero
however many items were added. Switched to useWatch with compute,
which re-runs whenever the watched field really changes.
Mobile layout
- The page was zoomed out on phones: flex items default to
min-width:auto, so a wide table stretched the layout past the
viewport. Added min-w-0 to the layout chain.
- The sr-only labels inside the tables are position:absolute with no
positioned ancestor, so they escaped the table's overflow-x-auto
clip and stretched the document. Made the scroll containers
relative.
- DialogContent was w-full plus an mx-4 gutter, which overflowed the
viewport by 16px and clipped the right edge of every form. The
component now owns the gutter itself.
Verified at 390x844: all pages and the quote, purchase order and add
user dialogs fit the viewport with no horizontal overflow.
|
||
|---|---|---|
| .cursor | ||
| .playwright-mcp | ||
| backup | ||
| docs | ||
| n8n | ||
| pocketbase | ||
| public | ||
| scripts | ||
| server | ||
| src | ||
| .env.example | ||
| .gitignore | ||
| .mcp.json | ||
| AI_RULES.md | ||
| app-overview.png | ||
| components.json | ||
| dashboard-updated.png | ||
| eslint.config.js | ||
| index.html | ||
| LOGGING_IMPLEMENTATION.md | ||
| login-mobile-final.png | ||
| login-mobile.png | ||
| login-page-final.png | ||
| login-page.png | ||
| nixpacks.json | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.js | ||
| quote-dialog.png | ||
| quote-fixed.png | ||
| quote-form.png | ||
| quote-page.png | ||
| quote-page2.png | ||
| quote-screenshot.png | ||
| README.md | ||
| setup-users.js | ||
| tailwind.config.js | ||
| tailwind.config.ts | ||
| test-logging.js | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vercel.json | ||
| vite.config.ts | ||
