# Microfinance Form & Data-Entry Standards

This document defines the form layout rules for all current and future modules.

## Objective

The application must feel like professional international financial software on laptops, desktops, tablets and phones. Responsive design must not simply stretch mobile controls across a wide screen.

## Core layout rules

1. Forms are mobile-first and use one column on narrow screens.
2. On tablets, related fields normally use two columns.
3. On laptops/desktops, forms use a 12-column composition grid.
4. Short fields should normally occupy 2–3 columns on wide screens.
5. Medium fields should normally occupy 3–4 columns.
6. Names, emails and longer selectors normally occupy 4–6 columns.
7. Textareas, long descriptions and complex uploads may use 6–12 columns where appropriate.
8. Do not make a field full width merely because space exists.
9. Do not limit every desktop form to two columns.
10. Keep the overall data-entry workspace readable; use `.mf-form-page` rather than allowing controls to expand indefinitely on ultra-wide screens.

## Information architecture

Every substantial form must group fields by business meaning. Examples:

- Registration & identity
- Contact & economic profile
- Residential address
- Next of kin
- Employment profile
- Login & security
- Branch access
- Roles & permissions
- Product definition
- Interest configuration
- Fees & penalties
- Legal identity
- Financial defaults

Use section dividers and section headings instead of stacking multiple heavy nested cards.

## Field sizing guidance

### Compact / short fields

Examples: status, gender, code, currency, percentage, duration, date, number format, relationship, branch code.

Preferred desktop span: `mf-col-2` or `mf-col-3`.

### Medium fields

Examples: phone, NIN, district, region, occupation, username, employee number, manager, product method.

Preferred desktop span: `mf-col-3` or `mf-col-4`.

### Long fields

Examples: full name, email, physical address, employer/business, file uploads.

Preferred desktop span: `mf-col-4` to `mf-col-6`.

### Full-width fields

Reserve `mf-col-12` for data that genuinely benefits from width, such as notes, licence details, explanations or complex content.

## Actions

Primary actions should be visually clear and normally appear after the final section. Secondary actions such as Cancel should remain available but visually subordinate.

## Responsive behavior

The shared stylesheet `public/assets/microfinance/forms.css` controls the layout system:

- Mobile: single-column fields
- Tablet: balanced two-column composition
- Desktop: exact 12-column spans
- Ultra-wide: controlled maximum form width and denser use of horizontal space

## Visual style

- Keep border radii restrained and consistent with the application theme.
- Avoid excessive padding.
- Avoid bold-heavy typography.
- Avoid nested cards unless the content is genuinely a separate object or panel.
- Prefer subtle dividers, concise descriptions and aligned form controls.
- Maintain consistent vertical rhythm between sections.
- Never sacrifice readability merely to fit more fields on one row.

## Future modules

All future collateral, loan application, contract, disbursement, payment, accounting, expense, payroll and reporting forms must follow these standards unless a specialized workflow has a documented reason not to.