Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Niurka77/tf-app/llms.txt

Use this file to discover all available pages before exploring further.

After a successful login, users land on the TF-App dashboard — the primary workspace for real estate teams. It is designed to surface sales activity, agent commission summaries, and property data in one place, giving field agents and managers a unified view of ongoing operations without switching between separate tools.

​
Dashboard Views

TF-App is structured around three HTML views, each serving a distinct role in the user journey:

login.html

The entry point of the app. Presented on every cold launch, it collects the user’s DNI and password before granting access to the rest of the application.

cargando.html

A transitional loading screen displayed while the app initialises data after login. Prevents a blank flash between authentication and the fully-populated dashboard.

dashboard.html

The main operational view. Hosts sales summaries, commission data, and property information once the user has been authenticated and data has been fetched.
All three views live under src/views/ and are served by Vite during development. At build time, Vite bundles the project into dist/, which is the directory Capacitor reads when packaging the Android APK (configured as "webDir": "dist" in capacitor.config.json).
The dashboard.html and cargando.html views are located in src/views/. During local development with npm run dev, Vite serves all files from the src/ directory. Make sure any navigation links or window.location.href assignments reference paths that Vite can resolve from your project root.
On successful login, main.js can redirect the user to dashboard.html using a standard browser navigation call. The redirect line is already present as a comment in the submit handler and simply needs to be uncommented once a real authentication flow is in place: 
// After successful authentication:
window.location.href = '/dashboard.html';
If you store an auth token in localStorage after login (recommended — see Authentication), you can read it on the dashboard page to verify the session is still valid before rendering sensitive data: 
document.addEventListener('DOMContentLoaded', () => {
  const token = localStorage.getItem('authToken');
  if (!token) {
    window.location.href = '/index.html'; // Redirect back to login if no token
    return;
  }
  // Proceed to load dashboard data...
});

​
Loading Screen

cargando.html acts as a visual buffer between the login redirect and the fully-loaded dashboard. Showing a loading screen prevents users from seeing an empty or partially-rendered dashboard while asynchronous data requests are in flight. A typical pattern is to redirect to cargando.html immediately after login, kick off your data fetch calls there, and then redirect to dashboard.html once the promises resolve: 
// In cargando.html's script — fetch data, then navigate onward
Promise.all([
  fetch('/api/sales', { headers: { Authorization: `Bearer ${localStorage.getItem('authToken')}` } }).then(r => r.json()),
  fetch('/api/commissions', { headers: { Authorization: `Bearer ${localStorage.getItem('authToken')}` } }).then(r => r.json())
]).then(([salesData, commissionData]) => {
  sessionStorage.setItem('salesData', JSON.stringify(salesData));
  sessionStorage.setItem('commissionData', JSON.stringify(commissionData));
  window.location.href = '/dashboard.html';
}).catch(() => {
  window.location.href = '/index.html'; // Fall back to login on error
});
The SplashScreen plugin configured in capacitor.config.json also contributes a 2-second launch animation ("launchShowDuration": 2000) before the WebView is shown, providing a smooth start on Android before cargando.html even loads.

​
Extending the Dashboard

The dashboard view is an open canvas ready for real estate data components. Here is a practical approach to wiring up live data sections: 1. Define your data containers in dashboard.html: 
<section id="sales-summary" class="p-4">
  <h2 class="text-green-700 font-bold text-lg">Resumen de Ventas</h2>
  <div id="sales-list" class="mt-2 space-y-2">
    <!-- Sales cards injected here by JS -->
  </div>
</section>

<section id="commission-summary" class="p-4">
  <h2 class="text-green-700 font-bold text-lg">Comisiones del Mes</h2>
  <div id="commission-list" class="mt-2 space-y-2">
    <!-- Commission rows injected here by JS -->
  </div>
</section>
2. Fetch and render data in dashboard.html’s script block: 
document.addEventListener('DOMContentLoaded', async () => {
  const token = localStorage.getItem('authToken');
  const salesContainer = document.getElementById('sales-list');

  try {
    const res = await fetch('/api/sales', {
      headers: { Authorization: `Bearer ${token}` }
    });
    const sales = await res.json();

    sales.forEach(sale => {
      const card = document.createElement('div');
      card.className = 'bg-green-50 rounded-lg p-3 text-sm text-green-800';
      card.textContent = `${sale.property} — ${sale.status}`;
      salesContainer.appendChild(card);
    });
  } catch (err) {
    salesContainer.textContent = 'No se pudo cargar la información de ventas.';
  }
});
3. Build and sync to Android after every change: 
npm run build
npx cap sync
npx cap open android
Wire your fetch() calls immediately after the login redirect — either inside cargando.html or at the top of the DOMContentLoaded listener in your dashboard script. Preloading sales and commission data before the dashboard renders removes perceived latency and gives agents a faster, more responsive experience in the field.

Build docs developers (and LLMs) love

Get started for freeTalk to us