Skip to content

[FE-33] Build Admin Workspace CRUD Form with react-hook-form and zod validation #1012

@devwums

Description

@devwums

Problem

Admins have no form to create or edit workspaces from the UI. Workspace management requires direct database access or API calls.

Proposed Solution

Create frontend/cntr/WorkspaceForm/WorkspaceForm.tsx. Props: initialData?: WorkspaceFormData, onSubmit: (data: WorkspaceFormData) => void, isSubmitting?: boolean. Fields: name (required), description, capacity (integer 1–500), hourlyRateKobo (shown in ₦), address, amenities (multi-select checkboxes). Uses react-hook-form + zod (both already installed). All implementation must live inside frontend/cntr/.

Acceptance Criteria

  • File at frontend/cntr/WorkspaceForm/WorkspaceForm.tsx
  • Uses react-hook-form and zod for validation
  • Price field shown in ₦ to the user but submitted in kobo
  • Capacity validates as a positive integer between 1 and 500
  • Edit mode pre-populates all fields from initialData
  • Submit button shows a loading state when isSubmitting is true
  • Test in frontend/cntr/WorkspaceForm/WorkspaceForm.test.tsx

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions