Create Fuel Cards
This modal interface allows users to input and register one or more new fuel cards by providing card details such as number, expiration date and PIN. It supports batch entry via the Add more option.
Main Form Elements
| Field Label | Input Type | Required | Description |
|---|---|---|---|
| Provider | Dropdown | ✅ Yes | Required dropdown to associate the fuel card with a fuel provider. Appears with red background if not filled. |
| Card number | Text input (masked format) | ✅ Yes | 16-digit card number, spaced in groups (e.g., 1234 1234 1234 1234). |
| Exp. date | Text input | ✅ Yes | Expiration date in MM/YY format. |
| PIN | Numeric input | ✅ Yes | 4-digit PIN code. Visible by default for direct entry. |
Card Row Actions
| Icon | Function |
|---|---|
| Copy Icon | Duplicates the card entry row for convenience. |
| X Icon | Removes the current card entry row. |
These icons allow easy cloning or deletion of individual card inputs.
Batch Entry Control
+ Add more- Adds additional card input rows. Useful for registering multiple cards in one submission.
- Appears below the first card input block.
Expected User Flow
- Select Provider
- Enter Card Number, Expiry, and PIN
- (Optional) Add more card rows or duplicate an entry
- Click Save to create one or more fuel cards
If any required fields are missing, validation will block submission and highlight the fields in red.
