Evaluation — Member Directory (WeWeb + Supabase)

1. Database Schema — members Table

Table is named members (not workspace_members or another variation)
id column: UUID type, default gen_random_uuid()
workspace_id column: UUID, FK → workspaces.id, ON DELETE CASCADE
user_id column: UUID, FK → auth.users.id, ON DELETE CASCADE, nullable
full_name column: text, NOT NULL
email column: text, NOT NULL
role column: text, NOT NULL, default 'member'
department column: text, nullable
phone column: text, nullable
status column: text, NOT NULL, default 'active'
avatar_url column: text, nullable
created_at column: timestamptz, default now()
CHECK constraint on role: values restricted to 'admin', 'member', 'owner'
CHECK constraint on status: values restricted to 'active', 'inactive', 'suspended'
UNIQUE constraint on (workspace_id, email)
Index on (workspace_id, status)
Index on (workspace_id, role)

2. Storage Bucket — member-avatars

Bucket is named exactly member-avatars
Bucket visibility is set to private (not public)
Allowed MIME types restricted to: image/jpeg, image/png, image/webp
Max file size configured to 2 MB
Storage path pattern followed: {workspace_id}/{member_id}/avatar.{ext}
RLS: workspace members can upload avatars scoped to their own workspace_id in the path
RLS: workspace members can read/view avatars within their workspace
RLS: members can delete their own avatar; admin/owner can delete any member's avatar

3. RLS Policies — members Table

RLS is enabled on the members table
SELECT policy: workspace members can view all members within their workspace (not other workspaces)
INSERT policy: only workspace admin/owner can create new members
UPDATE policy: admin/owner can update any member; member can update their own record
DELETE policy: admin/owner only
Policies use auth.uid() — not hardcoded user IDs
No policy grants true (unrestricted public access) unintentionally
Verified: a member cannot query members from a workspace they do not belong to

4. List Page

Page URL matches spec: /workspaces/{workspace_id}/members
Page loads members from DB — not hardcoded or mocked data
Search input: filters by full_name OR email contains — query executed server-side (DB), not client-side JavaScript
Department filter: dropdown populated from actual department values; filters DB query
Pagination: 12 members per page
Pagination controls: previous/next (or numbered) links work correctly
URL state: ?search=, ?department=, and ?page= query params preserved on navigation and refresh
Filter chips: shown when a search term or department filter is active
Filter chip: clicking it removes that specific filter and reloads results
Loading state: skeleton rows shown while data is fetching (not a spinner only)
Empty state: "No members found." message (or equivalent) shown when list is empty
Error state: error message shown with a retry button when the fetch fails
Status badge: correct visual state per status (active / inactive / suspended)
Role badge: correct visual state per role (admin / member / owner)
Avatar displayed: signed URL used (not a direct public URL, since bucket is private)
"Add Member" button: visible to admin/owner only — hidden for member role
Edit / Delete actions: visible to admin/owner only — hidden for member role

5. Add/Edit Modal

A single shared modal component is used for both Add and Edit (not two separate modals)
Edit pre-fills all fields with the existing member's values
full_name field: required, shows error if blank
email field: required, validated as valid email format, shows error if invalid
role field: dropdown — only valid options (admin, member, owner) selectable
department field: optional — no error if left blank
phone field: optional — if filled, validated as E.164 format (+[country][number]); shows field error if format is wrong
Avatar upload: accepts only image/jpeg, image/png, image/webp — checked by MIME type (not just file extension)
Avatar upload: file size checked (≤ 2 MB) before upload attempt — error shown immediately if exceeded
Avatar upload: preview shown after file is selected (before form submission)
Duplicate email error: shown as a field error below the email input, not as a toast
Submit button: shows loading state ("Saving…" or spinner) while API call is in progress
Submit button: disabled while loading (cannot double-submit)
On success: modal closes automatically
On success: member list refreshes to show new/updated member
On success: "Member added." or "Member updated." toast notification shown
Form errors are cleared when the modal is re-opened for a new add

6. Delete

Delete option: visible only to admin/owner — hidden from member role
Confirmation dialog shown before deletion: message includes the member's name ("Remove [Full Name] from workspace?")
Confirmation dialog does not say generic text like "Delete this item?"
Confirm button shows loading state while the delete request is in progress
Confirm button is disabled while loading (cannot double-confirm)
On success: "Member removed." toast shown
On success: member row disappears from the list without a full page reload
Error case: if deletion fails, error message shown; list unchanged

7. Standards Compliance

No hardcoded hex color values in WeWeb components — all from global color tokens
No hardcoded pixel spacing values — all from global spacing tokens
Collections fetched at page level — not inside individual sub-components
Auth token accessed via the WeWeb auth plugin — not via manual localStorage.getItem()
Signed URLs used for all avatar displays (private bucket)
Every async action (add, edit, delete, avatar upload) shows a loading state
No silent errors — every API error and storage error is surfaced in the UI
Mobile layout tested and functional at 375px and 768px viewport widths