# Screens Each screen lists a suggested route, the data it needs and its actions. Map every data item to a real endpoint in `API_MAPPING.md`. All figures in the designs are samples. --- ## 1. Officer dashboard: `/dashboard` Design: `01-officer-dashboard` **Data** - Logged-in officer: name, branch. - KPIs: portfolio outstanding (TZS) with change vs last month, active borrowers with new this month, on-time repayment % with change, PAR 30 % with number of loans to watch. - Collections vs expected for the last 6 months (amount per month). - Repayments by channel for the current month (% for M-Pesa, Airtel Money, Mixx by Yas, cash). - 5 newest loan applications: borrower name, business/occupation, location, loan type, amount, credit score, status (Approved / In review / Needs guarantor). - Due today: borrower, note (week X of Y, overdue days, auto-debit), amount; plus a count of overdue. **Actions** - Search by name, phone or loan ID → borrower profile or loan. - EN/SW language toggle. - **+ New loan** → `/loans/new`. - **View all** → applications list. - **Send SMS reminders to all** → POST reminders for today's due list. Confirm first, then show a success toast. **Colour rules:** score ≥700 green, 600–699 amber, under 600 red. --- ## 2. Borrower profile: `/borrowers/:id` Design: `02-borrower-profile` **Data** - Header: name, initials, occupation, area, member since, verification chips (NIDA verified, business licence, M-Pesa linked). - Credit score (0–850), risk band, change over 6 months, eligible limit, and score factors with a 0–100 strength value and a label. - Active loan: ID, status, principal, rate, instalment, next due date, paid vs total, and a schedule of N instalments, each one paid on time, paid late, due today or upcoming. - Payment history: date, channel, reference, amount, posted by (Auto / Officer). **Actions:** Call (`tel:` link), Offer top-up loan → `/loans/new?borrower=:id&type=topup`, Download statement (PDF from the backend if it exists). --- ## 3. Loan application: `/loans/new` Design: `03-loan-application` A five-step form: Customer → Income → Loan terms → Collateral & guarantor → Review. The design shows step 3. **Data** - Customer summary card. - Loan products from the backend: name, description, monthly rate and limits. Don't hard-code them. - Terms: amount, term, frequency (weekly, monthly or daily) and purpose. - Documents and collateral checklist, each item with a status (Verified / Uploaded / Agreed / Awaiting / Missing). - Repayment summary: instalment, number of payments, first payment date, principal, interest, fees, total to repay. **Use the backend's calculator or schedule endpoint if there is one.** Only if there isn't, use flat interest: interest = principal × rate × months; instalment = (principal + interest) ÷ number of payments; fees are deducted at disbursement. - Affordability: instalment ÷ verified income, compared with the policy limit (40% in the design). **Actions:** Save draft, Back/Next between steps, upload documents, send guarantor consent SMS, **Submit for approval**. Recalculate the summary live as the inputs change. --- ## 4. Credit approval: `/approvals/:loanId` Design: `04-credit-approval` **Data** - Queue (left): pending loans with name, product, amount, waiting time or flag, and status colour. Filters: All / Over 1M / Flagged. - Header: application ID, product, borrower, amount, current stage. - Approval chain steps (officer → branch manager → credit manager → disbursement), each with who acted and when. - Risk checks: credit bureau, NIDA, score, affordability, guarantor consent, duplicate loan. Each one passes or warns, with a note. - Mobile money cash flow for the last 12 weeks, average weekly income, instalment and ratio. - Officer's note. **Actions:** Approve (moves to the next stage), Request more info, Decline (needs a comment). The comment is saved to the audit log. Only users whose role matches the current stage can act; everyone else sees the screen read-only. --- ## 5. Portfolio and arrears report: `/reports/portfolio` Design: `05-portfolio-arrears-report` **Data** - Filters: period, branch. - KPIs: gross portfolio and active loans, disbursed this month, collected vs expected, PAR 30 amount, write-offs this year. - Arrears ageing buckets: current, 1–30, 31–60, 61–90 and over 90 days late. For each bucket: loan count, outstanding amount, % of portfolio and provision %. Also a stacked bar. - PAR 30 by branch (bar scale 0–10%; green under 3%, amber 3–5%, red 5% and over). - Loan officer table: name, branch, active loans, disbursed this month, collection rate, PAR 30. **Actions:** Export Excel, BoT return (PDF). Use backend exports if they exist; otherwise generate on the client and note this in `MISSING_ENDPOINTS.md`. --- ## 6. Mobile app, borrower (Swahili by default) ### Home: `/m` (design `06-mobile-home`) Shows the loan balance, the weeks paid out of the total, a progress bar, the next payment with a **Lipa sasa** button, quick actions (Omba mkopo → loan request, Ratiba → schedule, Akiba → savings), a credit score banner and recent payments. Bottom tabs: Mwanzo, Mikopo, Malipo, Wasifu. ### Pay: `/m/pay` (design `07-mobile-pay`) Shows the amount due and the loan reference. The borrower picks M-Pesa, Airtel Money or Mixx by Yas; the linked numbers are masked. **Thibitisha malipo** triggers the backend's mobile money push (STK). Then poll or listen for the result. ### Payment success (design `08-mobile-payment-success`) Shows the amount, channel, new balance and receipt reference, with a **Rudi mwanzo** button. Also design a failed/timeout state using the same layout with a retry button. ### Loan request: `/m/apply` (design `09-mobile-loan-request`) Shows the limit and score, amount chips, term chips, and a live calculation (interest, total, monthly instalment). **Tuma ombi** submits the request. ### Approved (design `10-mobile-loan-approved`) Shows the amount sent to M-Pesa, the first payment date, the monthly amount and the number of months. If the backend sends the request for manual review instead, show a "Ombi limepokelewa" pending state in the same layout.