Payment Requests UI

Frontend screens and components for the Payment Requests module. Built with Vue 3 (Composition API) using the shared UI library (FormGenerator, DataTable, Modal, Offcanvas, Select2, DatePicker).

Route Structure

/finances/payment-requests    → List of payment requests (table with filters and actions)

Routes are registered in frontend/client/src/routes/index.js under the finances prefix with layout dashboard. Access is gated by menu-payment-requests and payment-requests-manage permissions.

Screens

Payment Requests List (/finances/payment-requests)

Main entry: paginated, filterable list of payment requests with status-based actions.

Layout:

• SectionTitle: Displays the module title with a "New Request" button (visible to users with menu-payment-requests).
• Table: DataTable loading data from GET /finances/payment-requests with columns for status, provider, amount, currency, payment date, created by, and creation date.
• CreateRequest.offcanvas: Offcanvas form for creating and editing requests.
• Details.offcanvas: Offcanvas for viewing request details and performing status actions.

Behavior:

• Filters (status, search, date range, locale) are passed as query params to the API.
• Sorting and pagination are handled by the DataTable component.
• Row actions: "Details" (always visible), "Delete" (only for pending requests by the creator).
• Shared data (accounts, receivers, banks, offices, departments, issuers) is loaded once in index.vue and provided to child components via provide/inject.

Components

Module-specific

Component	Location	Description
Table	views/finances/payment-requests/components/Table.vue	DataTable with status badge, filters, row actions
CreateRequest.offcanvas	views/finances/payment-requests/components/CreateRequest.offcanvas.vue	FormGenerator-based form for create/edit with invoice search, provider RFC lookup, conditional banking section, file uploads, and locale-based filtering
Details.offcanvas	views/finances/payment-requests/components/Details.offcanvas.vue	Read-only detail view with status actions (approve, reject, program, unprogram, cancel), file previews, and event timeline
Program.modal	views/finances/payment-requests/components/Program.modal.vue	Modal for programming a request: dynamic tax configuration (when no invoice) or read-only invoice tax breakdown (when linked). Uses Select2 for tax selection and DatePicker for payment date
Reject.modal	views/finances/payment-requests/components/Reject.modal.vue	Modal for rejection with required reason input
EventTimeline	views/finances/payment-requests/components/EventTimeline.vue	Chronological event history display with actor names and timestamps

Shared Components Used

Component	Use
FormGenerator	Dynamic form rendering in CreateRequest
DataTable	Paginated table with server-side filtering
Modal	Program and Reject action modals
Offcanvas	CreateRequest and Details panels
Select2	Dropdowns for receiver, bank, tax selection
DatePicker	Date picker for payment date (wraps VueDatePicker)
DetailsV2	Key-value detail display in Details offcanvas
SectionTitle	Page header with action button
Alert	Warning messages (paid invoice, existing request)

Key Features

Invoice Search and Auto-fill

• Debounced UUID search in CreateRequest
• When found: auto-fills locale, receiver, issuer, provider, currency, amount
• Prevents linking paid invoices or invoices with existing requests
• Provider RFC search with debounce: auto-fills provider name and banking data

Conditional Banking Section

• Approved providers: Read-only display of bank name and account from zoho_invoice_issuers
• Unapproved providers: Editable bank select (filtered by locale), CLABE input, and document upload fields (bank statement, tax certificate)

Locale-Based Filtering

• Receivers and banks are filtered by the selected locale_id
• Changing locale resets receiver and bank if no longer valid
• Uses loose equality (==) for type-safe comparison with mixed string/number IDs

Tax Configuration (Program Modal)

• With linked invoice: Read-only display of invoice items with individual and total tax breakdown
• Without invoice: Dynamic tax selection (transferred + retained) from zoho_organization_taxes, auto-calculating subtotal from the total amount using reverse tax math

Edit Mode

• Supports editing requests in pending, approved, and rejected status
• Rejected requests edited by creator trigger automatic resubmission to pending
• Edit mode restores state with nextTick() calls to ensure computed properties update before dependent fields

User Flows

Create a payment request

1. User clicks "New Request" button.
2. CreateRequest offcanvas opens with empty form.
3. User optionally searches for an invoice by UUID.
4. If found: fields auto-fill from invoice data. If not: manual entry mode.
5. User fills remaining fields (classification, concept, uploads signed form).
6. User submits; request is created in pending status.

Review and act on a request (Finance)

1. Finance user opens request details from the table.
2. Details offcanvas shows all request data and available actions.
3. Finance can: Approve, Reject (with reason), Program (with date and tax config), Unprogram, or Cancel.
4. Each action triggers the appropriate status transition and Slack notification.

Correct a rejected request (Creator)

1. Creator sees rejected request with reason in the details panel.
2. Creator clicks "Correct" to open CreateRequest in edit mode with pre-filled data.
3. Creator makes corrections and submits.
4. Request status returns to pending and a Slack notification is sent to the channel.

Related Documentation

• Overview & Data Flow — Module purpose, backend structure, key decisions
• API — Endpoint reference
• User Guide — How to use payment requests in the app