Project — Contact Book

Features to Build

1. Xano Database Tables

contacts Table

2. Xano Reusable Function

check_workspace_permission

Before building endpoints, extract this reusable function:

Inputs:
  workspace_id (integer, required)
  user_id (integer, required)
  required_role (text, optional) — 'member', 'admin', 'owner'

Logic:
  1. Query workspace_members WHERE workspace_id = input AND user_id = input AND status = 'active'
  2. If not found: RAISE FORBIDDEN "You are not a member of this workspace."
  3. If required_role provided: check role hierarchy — RAISE FORBIDDEN if insufficient
  4. Return member record

Role hierarchy: member < admin < owner

Run checklist: Reusable Function

3. Xano Endpoints

All endpoints follow this structure:

1. Auth Token — validate as the first precondition
2. check_workspace_permission — called with workspace_id from the request
3. Input validation — validate all required fields
4. Business logic — query/mutate the database
5. Response — standard format

GET /api/contacts — List Contacts

Auth: Required
Input query params:
  workspace_id (required)
  search (optional) — searches full_name, email, company
  status (optional) — filter by status
  sort (optional) — 'full_name', 'created_at', 'company' (default: created_at DESC)
  page (optional, default: 1)
  per_page (optional, default: 25, max: 100)

Logic:
  1. Auth + workspace permission check (any member)
  2. Build query with filters applied
  3. Return paginated results

Response:
  { "data": [...], "total": 143, "page": 1, "per_page": 25 }

GET /api/contacts/{id} — Get Single Contact

Auth: Required
Logic:
  1. Auth + workspace permission (any member)
  2. Verify contact belongs to workspace (NOT_FOUND if not)
  3. Return contact

POST /api/contacts — Create Contact

Auth: Required
Body: { workspace_id, full_name, email, phone, company, status, notes }
Validation (in order):
  1. full_name: required, max 100 chars
  2. email: valid format if provided
  3. phone: E.164 format if provided
  4. status: one of valid values
  5. Workspace permission (any member)
  6. No duplicate email in same workspace (if email provided)
Logic: Insert contact, set created_by from auth token
Response: { "data": { contact } }
Error codes: VALIDATION_ERROR, DUPLICATE, FORBIDDEN

PUT /api/contacts/{id} — Update Contact

Auth: Required
Same validation as create (except workspace check — verify contact ownership)
Logic: Update contact, set updated_at
Response: { "data": { contact } }

DELETE /api/contacts/{id} — Delete Contact

Auth: Required
Permission: admin or owner role only
Logic: Verify contact in workspace, delete record
Response: { "message": "Contact deleted." }
Error codes: FORBIDDEN, NOT_FOUND

Run checklist: New API Endpoint (Xano) for each endpoint

4. Contacts List Page

URL: /workspace/{id}/contacts

Requirements

HEADER
[ ] "Contacts" title + "Add Contact" button (all members can add)

SEARCH & FILTERS
[ ] Search: searches full_name, email, company — debounced 300ms — sent to Xano
[ ] Filter: Status dropdown (All / Lead / Active / Inactive)
[ ] Active filter chips shown with X to remove
[ ] "Clear all" button when any filter is active
[ ] Filter/search state in URL params: ?search=acme&status=active

SORT
[ ] Sort dropdown or column headers: Name A–Z / Name Z–A / Newest / Oldest
[ ] Sort state in URL: ?sort=full_name&order=asc

TABLE COLUMNS
[ ] Full Name · Company · Email · Phone · Status badge · Actions

STATUS BADGES
[ ] lead=blue, active=green, inactive=grey

PAGINATION
[ ] 25 per page, "Showing X–Y of Z contacts"
[ ] Page in URL: ?page=2
[ ] Pagination resets to 1 when search/filter changes

STATES
[ ] Loading: skeleton rows
[ ] Empty (no contacts): "No contacts yet." + "Add your first contact" button
[ ] Empty (filter/search): "No contacts match your search." + clear button
[ ] Error: "Could not load contacts." + retry button

Run checklist: WeWeb Page Build · Search, Filters & Pagination

5. Contact Detail Panel / Page

A side panel or separate page showing the full contact details.

6. Add / Edit Contact Modal

One shared WeWeb component used for both Add and Edit.

Form Fields

Behavior

ADD MODE: title "Add Contact", submit "Add Contact"
EDIT MODE: title "Edit Contact", pre-filled fields, submit "Save Changes"

BOTH:
[ ] Duplicate email error shown below email field (not a toast)
[ ] Submit button: loading state, disabled during request
[ ] X + Escape close modal (confirm if dirty)
[ ] On success: toast notification, list refreshes
[ ] On API error: red banner above submit button

Run checklist: Add/Edit Consistency · Modals & Dialogs

7. Delete Contact

Title: "Delete Contact?"

Body: "'[Full Name]' will be permanently deleted."

Buttons: Cancel · "Delete Contact" (red)

Run checklist: Delete & Destructive Actions

What You Should NOT Do

× Put permission logic in WeWeb — check_workspace_permission runs in Xano
× Filter contacts client-side — all search/filter sent to Xano
× Use separate Add and Edit components
× Let DELETE endpoint succeed for a member-role user
× Skip the phone format — store E.164 even though display is formatted
× Show delete button to member-role users
× Return 500 for a DUPLICATE email — return a specific error code

Checklists to Run (in order)

Done When