> ## Documentation Index
> Fetch the complete documentation index at: https://docs.escrivalimited.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Payments & Digital Receipts

The Financial Dashboard provides farmers with absolute clarity regarding their earnings. Built on a highly optimized architecture, the Payments page ensures that requesting financial data is fast, secure, and deeply detailed.

## Initializing the Financial Dashboard

Financial data is highly sensitive. The app never caches this data locally; it requests it fresh from the Easyway Web API every single time.

<Steps>
  <Step title="The Steaming Cup (Loading State)" icon="mug-hot">
    While the secure API establishes a handshake, the user sees our signature **Steaming Cup Loading Indicator**.

    <div align="center">
      <video autoPlay loop muted playsInline style={{ maxWidth: '200px', borderRadius: '12px' }}>
        <source src="https://mintcdn.com/escrivalimited/Al_pFOMfRtFPAsJ8/images/steaming-cup-loading.mp4?fit=max&auto=format&n=Al_pFOMfRtFPAsJ8&q=85&s=ffb7913c5f6810f16df3e429ec4bca74" type="video/mp4" data-path="images/steaming-cup-loading.mp4" />
      </video>
    </div>
  </Step>

  <Step title="Default View: The Current Year" icon="sack-dollar">
    Unlike deliveries (which are daily), payments are processed monthly. Therefore, the dashboard defaults to the **Current Year's** full ledger, giving the farmer an immediate macro-view of their annual financial health.

    <div align="center">
      <img src="https://mintcdn.com/escrivalimited/Pgsy8LBKr4PTYmIs/images/payments-default-year.jpeg?fit=max&auto=format&n=Pgsy8LBKr4PTYmIs&q=85&s=ec6bcb593ea26d36f761454a924c4065" alt="Current Year Payments Ledger" style={{width: '100%', maxWidth: '300px', margin: '0 auto', borderRadius: '12px', boxShadow: '0 4px 14px 0 rgba(118, 189, 34, 0.3)' }} width="715" height="1600" data-path="images/payments-default-year.jpeg" />
    </div>
  </Step>
</Steps>

<Note>
  **API Timeout Recovery:** If the financial server experiences a cold-start delay, the localized **Refresh 🔄** button appears. Tapping it re-initiates the secure token request to fetch the ledger without restarting the app.
</Note>

***

## Granular Payment Breakdowns

A total "Net Pay" number is not enough. Farmers need to know exactly how that number was calculated.

<Card title="Tapping for Financial Clarity" icon="receipt" iconType="duotone" color="#76BD22">
  By tapping on any specific month's payment card, the system executes a secondary API request (`/Paymentdetails?index=x`) to pull the exact financial breakdown.

  **The Breakdown Modal Displays:**

  * 🟢 **Gross Earnings:** Base calculations for produce delivered (e.g., `GREEN LEAF PAY`).
  * 🔴 **Deductions:** Itemized list of deductions (e.g., previously ordered farm inputs, fertilizers, or tools).
  * 🏦 **Remittance:** Bank charges and the final account destination (`Co-operative Bank of Kenya`).
</Card>

<div align="center">
  <img src="https://mintcdn.com/escrivalimited/Pgsy8LBKr4PTYmIs/images/payment-breakdown-modal.jpeg?fit=max&auto=format&n=Pgsy8LBKr4PTYmIs&q=85&s=7804a5f999191580abbfae7910fd3d6a" alt="Payment Breakdown Details" style={{ maxWidth: '300px', margin: '0 auto', borderRadius: '12px' }} width="629" height="736" data-path="images/payment-breakdown-modal.jpeg" />
</div>

***

## Annual Ledger Filtering 📅

Farmers can audit their historical earnings spanning back multiple years using the integrated filtering tools.

Because the data density is lower (maximum 12 records per year), there are no restrictive date-range limits on this page.

* **Yearly Selection:** The user selects their desired historical year from the dropdown menu.
* **The "Apply Filter" Mandate:** To save mobile bandwidth, selecting a year does *not* automatically trigger a server request. The user must explicitly tap the **Apply Filter** button to fetch the new ledger.
* **Reset Function:** Instantly clears the query and returns to the current year.

<div align="center">
  <img src="https://mintcdn.com/escrivalimited/Pgsy8LBKr4PTYmIs/images/payments-apply-filter.jpeg?fit=max&auto=format&n=Pgsy8LBKr4PTYmIs&q=85&s=2e79d1f8717b610d96090f890f3f1185" alt="Apply Filter Button Interface" style={{ maxWidth: '300px', margin: '0 auto', borderRadius: '12px' }} width="720" height="393" data-path="images/payments-apply-filter.jpeg" />
</div>

<Note>
  **Empty States (No Records Found):** If a farmer filters for a year where no produce was delivered and no payment was processed, the API returns an empty dataset. The UI intercepts this and displays a clean, user-friendly "No Records Found" illustration rather than an intimidating zero-balance error.
</Note>

<div align="center">
  <img src="https://mintcdn.com/escrivalimited/U9hl2Ck6IH8TEQJ-/images/payments-no-records.jpeg?fit=max&auto=format&n=U9hl2Ck6IH8TEQJ-&q=85&s=90137db47c8bec631752c1ce988bcfe1" alt="No Payment Records Found" style={{ maxWidth: '300px', margin: '0 auto', borderRadius: '12px' }} width="371" height="137" data-path="images/payments-no-records.jpeg" />
</div>

***

## AI Financial Summaries ✨

Once an annual ledger is loaded, the **Sasini AI** engine computes a quick top-level summary of that specific year:

* 💰 **Total Gross Processed**
* 📉 **Total Deductions Applied**
* 💵 **Net Take-Home Pay**

<div align="center">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/escrivalimited/images/payments-ai-summary.jpeg" alt="AI Financial Statistics" style={{ maxWidth: '300px', margin: '0 auto', borderRadius: '12px', boxShadow: '0 4px 14px 0 rgba(118, 189, 34, 0.3)' }} />
</div>

***

## Navigation Efficiency

<Tip>
  **The Quick-Scroll Floating Action Button (FAB)**
  When reviewing a full year of transactions, the floating action button (⇪) at the bottom right allows the user to instantly auto-scroll to the top to adjust their filters or download a PDF receipt.
</Tip>

<div align="center">
  <img src="https://mintcdn.com/escrivalimited/U9hl2Ck6IH8TEQJ-/images/payments-fab-scroll.jpeg?fit=max&auto=format&n=U9hl2Ck6IH8TEQJ-&q=85&s=7e5bafd3c689568a2f6d81a75c68b80d" alt="Auto Scroll Floating Button" style={{ maxWidth: '300px', margin: '0 auto', borderRadius: '12px' }} width="325" height="136" data-path="images/payments-fab-scroll.jpeg" />
</div>
