Skip to main content

​
Overview

Barcode scanning is the primary input method in EnvaSistema. The app is designed to work with warehouse handheld terminals equipped with physical scanner buttons, enabling fast and accurate inventory operations.

​
Scanning Interface

Most inventory operations use the ScanningLayout component, which provides a consistent scanning experience across all operation types.

​
Interface Elements

1

Operation Header

Shows the operation title and subtitle with color-coding:
  • Blue (#0061A6): Standard operations (receipts, sales)
  • Red (#B71C1C): Destructive operations (waste/merma)
  • Gray (#455A64): Transformations
2

Information Card

Displays operation-specific instructions with:
  • Colored left accent strip
  • Info/radar icon
  • Clear instruction text
3

Scan Area

Central scanning zone with QR code icon and instructions
4

Scan Counter

Shows total number of codes scanned with a visual badge
5

Save Button

Action button to complete and save the operation

​
How to Scan Barcodes

1

Position Your Terminal

Hold the terminal comfortably with one hand, ensuring the scanner window is unobstructed.
2

Aim at Barcode

Point the scanner at the barcode from 6-12 inches away (15-30 cm). The barcode should be clearly visible.
3

Press Scanner Button

Press the physical scanner button on the side of the terminal. You’ll see:
  • A red laser beam or LED light
  • An audible beep when successful
  • The scan counter increment
4

Verify the Count

Check that the scan counter increased. If not, scan the barcode again.
For Development/Testing: The scanning area is tappable in development builds. Tap the scan area to simulate a barcode scan and increment the counter.

​
Scanning Layout Implementation

The scanning interface is implemented in ScanningLayout.kt:28-196: 
fun ScanningLayout(
    title: String,
    subtitle: String,
    infoText: String,
    onBackClick: () -> Unit,
    onSaveClick: (Int) -> Unit,
    counterLabel: String = "Códigos escaneados",
    saveButtonText: String = "Guardar Ingreso"
)

​
Scan Counter

The scan count is tracked using Compose state (ScanningLayout.kt:44): 
var scannCount by remember { mutableIntStateOf(0) }
The counter displays in a circular badge (ScanningLayout.kt:147-155): 
Surface(
    color = primaryColor,
    shape = CircleShape,
    modifier = Modifier.size(32.dp)
) {
    Box(contentAlignment = Alignment.Center) {
        Text(text = scannCount.toString(), color = Color.White)
    }
}

​
Scan Area Design

The scan area (ScanningLayout.kt:103-138) provides visual feedback: 
Box(
    modifier = Modifier
        .fillMaxWidth()
        .height(200.dp)
        .clickable { scannCount++ }, // Development: tap to scan
    contentAlignment = Alignment.Center
) {
    Icon(imageVector = Icons.Default.QrCodeScanner)
    Text("Presione el botón lateral del terminal para escanear")
    Text("(Toque aquí para simular escaneo)") // Dev only
}
The scan area shows a QR code scanner icon and clear instructions in Spanish, making it easy for new users to understand the scanning process.

​
Operation-Specific Scanning

Different operations use customized scanning parameters:

​
Standard Receipt Operations

ScanningLayout(
    title = "Producción Nueva",
    subtitle = "Ingreso desde producción",
    infoText = "Escanee los códigos de los productos nuevos",
    counterLabel = "Códigos escaneados",
    saveButtonText = "Guardar Ingreso",
    primaryColor = Color(0xFF0061A6)
)

​
Destructive Operations (Waste/Merma)

ScanningLayout(
    title = "Merma (Molino)",
    subtitle = "Destrucción de inventario",
    infoText = "ADVERTENCIA: Esta operación es IRREVERSIBLE",
    counterLabel = "Códigos para destruir",
    saveButtonText = "Confirmar Destrucción",
    primaryColor = Color(0xFFB71C1C), // Red color
    infoIcon = Icons.Default.Warning
)

​
Package Operations

ScanningLayout(
    title = "Armar Paquetes",
    subtitle = "Agrupación de piezas",
    infoText = "Escanee todas las piezas que conforman el paquete",
    counterLabel = "Piezas escaneadas",
    saveButtonText = "Crear Paquete",
    saveButtonIcon = Icons.Default.Inventory
)

​
Save Button Behavior

The save button has intelligent enable/disable logic (ScanningLayout.kt:45): 
val buttonEnabled = isSaveButtonEnabled?.invoke(scannCount) ?: (scannCount > 0)
1

Default Behavior

Button is disabled (gray) when scan count is 0
2

Enabled State

Button becomes active (colored) when count > 0
3

Custom Validation

Some operations may require specific count thresholds or additional validation
The save button is styled differently when disabled (ScanningLayout.kt:179-193):
colors = ButtonDefaults.buttonColors(
    containerColor = if (buttonEnabled) primaryColor else Color(0xFFB0BEC5),
    contentColor = Color.White
)
A gray button means you cannot save yet—scan at least one item first.

​
Information Cards

Each scanning screen includes a color-coded information card (ScanningLayout.kt:72-98):

Blue Cards

Standard operations with helpful tips

Red Cards

Critical warnings for destructive operations

Green Cards

Success confirmations or positive actions

Gray Cards

Neutral information or transformation operations

​
Best Practices

Scan at a Steady Pace: Wait for the beep before moving to the next item. Scanning too quickly may cause missed scans.
Check the Counter: Always verify the counter matches the number of items you’ve scanned before saving.
Clean Barcodes: Dirty or damaged barcodes may not scan properly. Wipe them clean if needed.
Proper Lighting: Ensure adequate lighting when scanning. Shadows or glare can interfere with the scanner.
Double Scanning: If you accidentally scan an item twice, note this and inform your supervisor. The app currently doesn’t prevent duplicate scans within an operation.

​
Extra Content Support

Some operations include additional input fields before the scanning area (ScanningLayout.kt:66-70): 
extraContent?.invoke(this)
For example, Devolución de Mercadería might require:
  • Invoice number input field
  • Customer name/ID field
  • Return reason selection
These fields appear above the information card when needed.

​
Troubleshooting

Possible causes:
  • Low battery on the terminal
  • Scanner hardware malfunction
  • Barcode format not supported
Solutions:
  • Charge the terminal
  • Restart the device
  • Try a different barcode
  • Contact IT support
Possible causes:
  • Scan was unsuccessful (no beep)
  • App interface frozen
Solutions:
  • Listen for the beep confirmation
  • Scan the item again
  • If frozen, return to home screen and restart the operation
Cause: No items have been scanned yet (count = 0)Solution: Scan at least one barcode before attempting to save.
Solution: Currently, you must:
  1. Use the back button to cancel the operation
  2. Start a new operation
  3. Scan the correct items
Note: There’s no “undo” feature for individual scans yet.

​
Scanning Workflow Example

Here’s a typical workflow for Producción Nueva (New Production Receipt):
1

Navigate to Operation

Home → INGRESOS → Producción Nueva
2

Read Information Card

“Escanee los códigos de los productos nuevos”
3

Scan Items

  • Point scanner at first barcode
  • Press scanner button
  • Wait for beep
  • Verify counter shows “1”
  • Repeat for all items
4

Verify Count

Check “Códigos escaneados” counter matches expected quantity
5

Save Operation

  • Ensure save button is blue (enabled)
  • Tap “Guardar Ingreso”
  • Wait for confirmation

​
Color Coding Reference

Operation TypePrimary ColorHex CodeUsage
Standard (Ingresos/Salidas)Blue#0061A6Most operations
Destructive (Merma)Red#B71C1CWaste/destruction
TransformationsGray#455A64Disassembly
Information BackgroundLight Blue#E1F5FEInfo cards
Warning BackgroundLight Red#FFEBEEWarning cards

​
Next Steps

Navigation

Learn about app navigation and menu structure

Shift Management

Understand shift information and user sessions

Build docs developers (and LLMs) love

Get started for freeTalk to us