Issue #12 — Frontend: Workspace Create / Edit Modal (Admin)

[yusuftomilola]

Location: frontend/components/admin/WorkspaceFormModal.tsx

Description

The admin workspaces page (Issue #11) requires a reusable modal component for both creating a new workspace and editing an existing one. The same component should handle both flows — when an existing workspace is passed as a prop it operates in edit mode; when none is passed it operates in create mode.

Price inputs in the form should accept values in Naira (₦) for user convenience and convert to kobo (multiply by 100) before sending to the API.

Acceptance Criteria

• The component is created at frontend/components/admin/WorkspaceFormModal.tsx
• Accepts props: open: boolean, onClose: () => void, and optionally workspace?: Workspace (if provided, the form is in edit mode)
• The form includes fields for: Name (required), Description, Type (select from enum options), Capacity (number), Price Per Hour in ₦ (optional), Price Per Day in ₦ (optional), Price Per Month in ₦ (optional), Amenities (comma-separated or tag-style input), and Images (URL inputs)
• On submit in create mode, calls the useCreateWorkspace mutation. On submit in edit mode, calls the useUpdateWorkspace mutation
• Price values entered in ₦ are multiplied by 100 before being sent to the API as kobo values
• The modal shows a loading state on the submit button while the mutation is pending
• On success, the modal closes and the workspace list refreshes automatically (via query invalidation in the hook)
• Validation ensures name and capacity are not empty before submitting
• npx tsc --noEmit passes with no errors

[teethaking]

hey id like to work on this issue