Dashboard UI Components

Dashboard Layout and Navigation

The LoanPilot dashboard provides a structured environment for managing loan applications, performing financial analyses, and generating credit memos. The interface is built using Next.js App Router and organized within the (dashboard) route group to ensure consistent layout and authenticated access across all management pages.

Sidebar Navigation

The navigation system is persistent across the dashboard, allowing users to switch between:

• Overview: High-level metrics of all active applications.
• Applications: A searchable list of loan applications and their current statuses.
• Organization Settings: Management of bank-specific configurations and team profiles.

Component Library

The UI utilizes a set of standardized components (built on top of Tailwind CSS and Radix UI) to ensure visual consistency:

• Cards (<Card />): Used for grouping related data, such as borrower details or summary metrics.
• Form Elements (<Input />, <Label />): Standardized fields for data entry and application filtering.
• Buttons (<Button />): Context-aware actions for triggering document uploads or starting AI analyses.

Application State Management

LoanPilot uses Supabase for real-time data fetching and state persistence. Application state is typically managed at the page level (e.g., src/app/(dashboard)/applications/[id]/page.tsx) and passed down to specialized components.

Data Fetching Patterns

The dashboard interacts with several specialized API endpoints to manage application data:

| Endpoint | Method | Description | | :--- | :--- | :--- | | /api/documents/upload | POST | Uploads files to storage and creates database records. | | /api/analyze/bank-statement | POST | Triggers AI extraction for bank PDF files. | | /api/analyze/gst-returns | GET/POST | Fetches or triggers analysis for GST documents. | | /api/analyze/reconciliation | GET/POST | Performs cross-document verification (Bank vs. GST vs. P&L). |

Feature-Specific Components

Document Uploader

The document uploader is a critical UI component that handles multi-part form data. It interacts with the smartUpload service to route files to either Supabase Storage or local development storage.

Usage Example:

const handleUpload = async (file: File, docType: string) => {
  const formData = new FormData();
  formData.append('file', file);
  formData.append('applicationId', currentAppId);
  formData.append('organizationId', orgId);
  formData.append('documentType', docType);

  const response = await fetch('/api/documents/upload', {
    method: 'POST',
    body: formData,
  });
  
  const result = await response.json();
  if (result.success) {
    // Refresh application activities or document list
  }
};

Analysis Controllers

Analysis components allow users to trigger automated financial extractions. These components provide visual feedback (loading states) while the AI processes documents.

Bank Statement Analysis

This component processes bank statements to extract cash flow metrics, fraud flags, and EMI obligations.

• Inputs: documentId, applicationId, organizationId, aiProvider (optional).
• Outputs: Enhanced metrics including overall_health_score, fraud_risk_score, and net_disposable_income.

Financial Statement Analysis

Handles the extraction of Balance Sheets and P&L statements.

• Supported Types: balance_sheet, profit_loss, itr.
• UI Interaction: Users select the statement type before triggering the extraction to ensure the AI applies the correct parsing logic.

Credit Memo Generator

The Credit Memo component aggregates data from all available analyses (Bank, GST, Financials) and borrower profile information to generate a comprehensive risk assessment report.

Authentication and Access Control

The dashboard is protected by a server-side middleware and Supabase Auth.

Auth Flow Components:

• Login Page (/login): Handles email/password authentication and redirects users to the redirectTo param or the /dashboard.
• Signup Page (/signup): Manages user registration and uses a custom PostgreSQL function (handle_new_user_signup) to atomically create the user profile and their associated organization.
• Callback Handler (/auth/callback): Manages the exchange of Auth codes for sessions, particularly during social logins or email confirmations.

// Example of a protected server action in a dashboard component
const supabase = await createClient();
const { data: { user }, error } = await supabase.auth.getUser();

if (error || !user) {
  // Redirect to login or show unauthorized state
}