Key Features

MotorDesk is a comprehensive vehicle fleet management SaaS platform with integrated electronic billing for SUNAT compliance. Built as a Progressive Web App (PWA), it provides offline-first capabilities for uninterrupted fleet operations.

Fleet Management

Complete vehicle tracking with maintenance scheduling and mileage monitoring

Electronic Billing

SUNAT-compliant electronic invoicing with offline synchronization

Customer Management

Comprehensive customer directory with vehicle associations and billing history

Product Inventory

Maintain product catalogs with pricing, categories, and change frequencies

Reports & Analytics

Generate insights on sales, fleet performance, and customer behavior

Multi-Branch Support

Manage multiple locations with independent billing series

1. Fleet Management

Track and manage your entire vehicle fleet with real-time mileage monitoring, maintenance scheduling, and comprehensive vehicle profiles.

Vehicle Registration

Each vehicle in the system includes detailed information:

// Vehicle data structure
{
  "id": "veh-001",
  "propietarioId": "cust-001",
  "conductorHabitualId": "cust-002",
  "placa": "ABC-123",
  "marca": "Toyota",
  "modelo": "Hilux",
  "anio": 2020,
  "color": "Blanco",
  "kilometrajeActual": 45000,
  "createdAt": "2023-10-25T10:00:00Z",
  "syncedAt": "2023-10-25T10:01:00Z"
}

Maintenance Tracking

The system automatically tracks maintenance schedules based on mileage:

Current Mileage: Real-time tracking of vehicle kilometers
Next Service Alert: Visual warnings when approaching maintenance threshold
Service History: Complete history of all maintenance and services

When a vehicle reaches within 1000 km of its next scheduled maintenance, the system displays an alert icon to notify technicians.

Key Capabilities

Search & Filter

Search by license plate, customer name, or vehicle model

Quick Actions

View details, edit information, or create invoices directly from the fleet list

Pagination

Configurable results per page (5, 10, 20, 50 records)

Vehicle Management Interface

The vehicles page (src/pages/Vehicles.tsx:78-174) provides a comprehensive table view:

// Vehicle list with mileage alerts
<span className={`${styles.kmNextBadgeBase} ${
  vehicle.kmActual >= vehicle.kmProximo - 1000
    ? styles.kmNextBadgeAlert
    : styles.kmNextBadgeNormal
}`}>
  Próx: {vehicle.kmProximo.toLocaleString()} km
  {vehicle.kmActual >= vehicle.kmProximo - 1000 && (
    <AlertTriangle className={styles.kmAlertIcon} />
  )}
</span>

2. Electronic Billing (SUNAT Compliance)

MotorDesk provides full electronic invoicing capabilities compliant with SUNAT (Peru’s tax authority) requirements.

Supported Document Types

FACTURA ELECTRÓNICA (Electronic Invoice) - Series F001, F002, F003
BOLETA DE VENTA (Sales Receipt) - Series B001, B002
PROFORMA (Quote) - Pre-billing document

Invoice Creation Workflow

Select Customer

Search and select from the customer directory with autocomplete

Add Products

Add items using the product search with barcode support

Vehicle Details

Link the invoice to a specific vehicle and record mileage

Review & Process

Preview the document and submit for SUNAT synchronization

Sales Data Structure

// Sale/Invoice schema
{
  "id": "sale-001",
  "branchId": "branch-001",
  "userId": "user-001",
  "customerId": "cust-001",
  "vehicleId": "veh-001",
  "tipoComprobante": "FACTURA",
  "serie": "F001",
  "correlativo": "000150",
  "fechaEmision": "2023-10-26T14:30:00Z",
  "moneda": "PEN",
  "subtotal": 122.88,
  "igv": 22.12,
  "total": 145.00,
  "kilometrajeIngreso": 45000,
  "proximoCambioKm": 50000,
  "estadoSunat": "ACEPTADO"
}

Advanced Features

Frequent Products: The system tracks commonly used products per vehicle and displays quick-add buttons:

// Frequent products display (src/pages/Sales.tsx:194-209)
{productosUsuales.length > 0 && cart.length === 0 && (
  <div className="flex gap-2 mt-2">
    <span className="mt-1 font-bold text-slate-500 text-xs">
      FRECUENTES:
    </span>
    {productosUsuales.map((p) => (
      <button
        key={p.id}
        onClick={() => addItem(p)}
        className="bg-blue-50 hover:bg-blue-600 px-3 py-1 ..."
      >
        + {p.nombre}
      </button>
    ))}
  </div>
)}

All invoices require SUNAT synchronization. The system stores documents locally and syncs when connection is available.

Tax Calculations

Automatic IGV (VAT) calculation at 18%:

// Total calculations display (src/pages/Sales.tsx:317-329)
<p className="font-black text-slate-800 text-2xl md:text-3xl tracking-tight">
  TOTAL{" "}
  <span className="ml-2 text-blue-600">
    S/ {totals.total.toFixed(2)}
  </span>
</p>
<p className="mt-1 font-semibold text-slate-500 text-sm">
  Subtotal: S/ {totals.subtotal.toFixed(2)} &nbsp;&bull;&nbsp; IGV:{" "}
  S/ {totals.igv.toFixed(2)}
</p>

3. Customer Management

Maintain a complete directory of customers with RUC/DNI validation and vehicle associations.

Customer Features

Document Validation

Support for RUC and DNI with external API validation

Vehicle Tracking

View all vehicles associated with each customer

Contact Management

Store phone numbers, emails, and fiscal addresses

Sales History

Complete billing history per customer

External API Integration

The system integrates with decolecta API for automatic data retrieval:

// Customer validation (src/pages/Customers.tsx:46-52)
const handleSearchApi = async () => {
  const data = await fetchDecolectaData(
    formData.tipoDocumentoIdentidad,
    formData.numeroDocumento
  );
  if (data) {
    setFormData(prev => ({
      ...prev,
      nombreRazonSocial: data.nombreRazonSocial,
      direccion: data.direccion
    }));
    setApiSuccess(true);
  }
};

4. Product Inventory

Manage your service and parts catalog with category organization and maintenance intervals.

Product Attributes

Barcode/SKU: Unique product identifier
Category: ACEITES, FILTROS, LUBRICANTES, SERVICIO TÉCNICO, etc.
Unit of Measure: NIU (Unidad), GLN (Galón), etc.
Sale Price: PEN currency with IGV affectation
Change Frequency: Maintenance interval in kilometers

Category Filtering

Users can filter products by category:

// Category filter (src/pages/Products.tsx:37-39)
<select className={styles.filterSelect} value={selectedCategory} onChange={handleCategoryChange}>
  {categories.map(cat => (
    <option key={cat} value={cat}>
      {cat === "TODAS" ? "Todas las Categorías" : cat}
    </option>
  ))}
</select>

Products with maintenance intervals automatically appear as “frequent products” when servicing vehicles that have previously used them.

5. Reports & Analytics

Generate comprehensive reports for business intelligence and compliance.

Available Reports

The system provides multiple report types defined in src/constants/reports/reports.ts:

Sales Reports

Daily, weekly, and monthly billing summaries

Inventory Reports

Product usage and stock analysis

Fleet Reports

Vehicle maintenance schedules and history

Customer Reports

Client portfolio and billing patterns

Report Interface

Reports are presented as interactive cards:

// Reports grid (src/pages/Reports.tsx:42-67)
<div className="gap-5 grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
  {items.map((item, idx) => {
    const IconComponent = iconMap[item.icono] || FileText;
    return (
      <button onClick={() => navigate(`/reports/${item.id}`)}
        className="group flex flex-col justify-center items-center bg-white shadow-sm hover:shadow-lg ...">
        <div className="flex justify-center items-center bg-orange-50 mb-3 rounded-full ...">
          <IconComponent size={28} className="text-orange-500" />
        </div>
        <div className="px-4 text-center">
          <div className="font-semibold text-gray-800 text-base">
            {item.titulo}
          </div>
        </div>
      </button>
    );
  })}
</div>

6. Multi-Branch Operations

Manage multiple business locations with independent configurations.

Branch Settings

Each branch has:

Location Code: SUNAT establishment code (e.g., “0001”, “0002”)
Name: Branch commercial name
Fiscal Address: Registered address with SUNAT
Independent Series: Each branch manages its own invoice series

Branch Configuration Interface

// Branch display (src/pages/Settings.tsx:155-171)
<div className={styles.cardGrid}>
  {branchesData.map((branch) => (
    <div key={branch.id} className={styles.infoCard}>
      <div className={styles.cardBadge}>{branch.codigoBase}</div>
      <h4 className={styles.cardTitle}>{branch.nombre}</h4>
      <p className="flex items-start gap-1 mt-2 text-slate-500 text-xs">
        <MapPin className="w-4 h-4 shrink-0" /> {branch.direccion}
      </p>
    </div>
  ))}
</div>

Billing Series Management

Each branch manages independent document series with automatic correlation:

// Series management (src/pages/Settings.tsx:184-206)
{seriesData.map((serie) => (
  <div key={serie.id} className={styles.infoCard}>
    <div className={`${styles.cardBadge} ${
      serie.tipoDocumento === "FACTURA"
        ? "text-blue-600 bg-blue-50 border-blue-200"
        : "text-indigo-600 bg-indigo-50 border-indigo-200"
    }`}>
      {serie.tipoDocumento}
    </div>
    <h4 className="mt-4 mb-1 font-black text-slate-800 text-3xl">
      {serie.serie}
    </h4>
    <p className={styles.cardText}>
      Correlativo actual:{" "}
      <strong className="text-blue-600">
        {String(serie.correlativoActual).padStart(6, "0")}
      </strong>
    </p>
  </div>
))}

7. Offline-First Architecture

MotorDesk is built as a Progressive Web App with full offline capabilities.

Technology Stack

State Management:

Redux Toolkit for application state
Redux Persist with LocalForage for offline persistence
Redux Saga for async operations

// Store configuration (src/store/index.ts:10-19)
localforage.config({
  name: 'FleetSUNAT_DB',
  storeName: 'redux_state'
});

const persistConfig = {
  key: 'sunat-root',
  storage: localforage,
  whitelist: ['auth', 'sales'],
};

PWA Configuration:

// PWA setup (vite.config.ts:11-26)
VitePWA({
  registerType: "autoUpdate",
  includeAssets: ["favicon.ico", "apple-touch-icon.png", "mask-icon.svg"],
  manifest: {
    name: "Sistema de Gestión de Flotas SUNAT 2026",
    short_name: "FleetSUNAT",
    description: "Gestión logística y facturación electrónica offline-first",
    theme_color: "#ffffff",
    background_color: "#ffffff",
    display: "standalone"
  }
})

Sync Status Indicator

The dashboard displays real-time sync status:

// Sync status (src/pages/Home.tsx:31-34)
<div className={styles.glassBadge}>
  <div className={styles.onlineIndicator}></div>
  Sistema en línea y sincronizado
</div>

All data is stored locally using LocalForage and automatically synchronized with the server when connection is restored.

Quick Actions Dashboard

The home screen provides one-click access to common operations:

// Quick actions (src/pages/Home.tsx:153-176)
<div className={styles.quickActions}>
  <h3 className={styles.sectionTitle}>Accesos Rápidos</h3>
  <div className={styles.actionsGrid}>
    <Link to="/sales" className={styles.actionBtn}>
      <FileText className={`${styles.actionIcon} w-8 h-8`} />
      <span>Emitir Factura</span>
    </Link>

    <Link to="/vehicles" className={styles.actionBtn}>
      <Truck className={`${styles.actionIcon} w-8 h-8`} />
      <span>Ver Flota</span>
    </Link>

    <Link to="/clients" className={styles.actionBtn}>
      <Users className={`${styles.actionIcon} w-8 h-8`} />
      <span>Gestión de Clientes</span>
    </Link>

    <button className={styles.actionBtn}>
      <Zap className={`${styles.actionIcon} w-8 h-8`} />
      <span>Sincronizar Offline</span>
    </button>
  </div>
</div>

Real-Time Statistics

The dashboard displays key metrics:

Active Vehicles: Total vehicles in the system
Daily Revenue: Today’s billing in PEN currency
Pending Maintenance: Vehicles approaching service intervals

// Stats display (src/pages/Home.tsx:109-151)
const { totalVehicles, todaySales, pendingMaintenances, isLoading } = useHomeStats();

const formatCurrency = (amount: number) => {
  return new Intl.NumberFormat("es-PE", {
    style: "currency",
    currency: "PEN",
  }).format(amount);
};

Next Steps

Installation Guide

Set up MotorDesk in your environment

API Reference

Explore the API documentation

User Management

Configure users and permissions

SUNAT Integration

Configure electronic billing

Overview

Getting Started

Core Features

User Guides

​Key Features

Fleet Management

Electronic Billing

Customer Management

Product Inventory

Reports & Analytics

Multi-Branch Support

​1. Fleet Management

​Vehicle Registration

​Maintenance Tracking

​Key Capabilities

Search & Filter

Quick Actions

Pagination

​Vehicle Management Interface

​2. Electronic Billing (SUNAT Compliance)

​Supported Document Types

​Invoice Creation Workflow

​Sales Data Structure

​Advanced Features

​Tax Calculations

​3. Customer Management

​Customer Features

Document Validation

Vehicle Tracking

Contact Management

Sales History

​External API Integration

​4. Product Inventory

​Product Attributes

​Category Filtering

​5. Reports & Analytics

​Available Reports

Sales Reports

Inventory Reports

Fleet Reports

Customer Reports

​Report Interface

​6. Multi-Branch Operations

​Branch Settings

​Branch Configuration Interface

​Billing Series Management

​7. Offline-First Architecture

​Technology Stack

​Sync Status Indicator

​Quick Actions Dashboard

​Real-Time Statistics

​Next Steps

Installation Guide

API Reference

User Management

SUNAT Integration

Build docs developers (and LLMs) love

Key Features

1. Fleet Management

Vehicle Registration

Maintenance Tracking

Key Capabilities

Vehicle Management Interface

2. Electronic Billing (SUNAT Compliance)

Supported Document Types

Invoice Creation Workflow

Sales Data Structure

Advanced Features

Tax Calculations

3. Customer Management

Customer Features

External API Integration

4. Product Inventory

Product Attributes

Category Filtering

5. Reports & Analytics

Available Reports

Report Interface

6. Multi-Branch Operations

Branch Settings

Branch Configuration Interface

Billing Series Management

7. Offline-First Architecture

Technology Stack

Sync Status Indicator

Quick Actions Dashboard

Real-Time Statistics

Next Steps