Blocks · @jengacore/member-overview

Member overview

Msingi member page: summary, 44px teller actions, loans and transactions tabs.

Msingi

Jeanne Mukamana

KYC verified

M-004211Kicukiro branch

Savings: 1,250,000RWF
Shares: 200,000RWF
Loan outstanding: 374,999RWFIn arrears

Loan L-2026-0381, 12 monthly instalments, amounts in RWF.
No.	Due date	Principal	Interest	Balance	Status
01	05 Aug 2026	41,667RWF	6,250RWF	458,333RWF	Paid
02	05 Sep 2026	41,667RWF	5,729RWF	416,666RWF	Paid
03	05 Oct 2026	41,667RWF	5,208RWF	374,999RWF	In arrears
04	05 Nov 2026	41,667RWF	4,687RWF	333,332RWF	Scheduled

Install

terminal

npx shadcn@latest add @jengacore/member-overview

Without the namespace configured: npx shadcn@latest add https://ui.jengacore.com/r/<new-york-v4|base-nova>/member-overview.json

Registry dependencies

@jengacore/button @jengacore/tabs @jengacore/loan-schedule @jengacore/member-summary

Source

components/blocks/member-overview.tsx

"use client"

import * as React from "react"
import { FileText, Plus } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsCount, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { LoanSchedule, type Instalment } from "@/components/jc/loan-schedule"
import { MemberSummary } from "@/components/jc/member-summary"

const SCHEDULE: Instalment[] = [
  { n: 1, due: "2026-08-05", principal: "41667", interest: "6250", balance: "458333", status: "paid" },
  { n: 2, due: "2026-09-05", principal: "41667", interest: "5729", balance: "416666", status: "paid" },
  { n: 3, due: "2026-10-05", principal: "41667", interest: "5208", balance: "374999", status: "in_arrears" },
  { n: 4, due: "2026-11-05", principal: "41667", interest: "4687", balance: "333332", status: "scheduled" },
]

/** Msingi member page: summary with the three balances, then loans and transactions as tabs. Light theme, 44px teller actions. */
export function MemberOverview() {
  return (
    <div className="flex flex-col gap-6">
      <MemberSummary
        member={{ name: "Jeanne Mukamana", number: "M-004211", branch: "Kicukiro branch", initials: "JM", kyc: "verified" }}
        currency="RWF"
        balances={{ savings: "1250000", shares: "200000", loan: "374999" }}
        arrears
        actions={
          <>
            <Button variant="outline" size="lg">
              <FileText />
              Statement
            </Button>
            <Button size="lg">
              <Plus />
              New transaction
            </Button>
          </>
        }
      />
      <Tabs defaultValue="loans">
        <TabsList>
          <TabsTrigger value="loans">
            Loans <TabsCount>1</TabsCount>
          </TabsTrigger>
          <TabsTrigger value="transactions">Transactions</TabsTrigger>
        </TabsList>
        <TabsContent value="loans">
          <div className="overflow-hidden rounded-lg border border-border bg-card shadow-card">
            <LoanSchedule rows={SCHEDULE} currency="RWF" caption="Loan L-2026-0381, 12 monthly instalments, amounts in RWF." />
          </div>
        </TabsContent>
        <TabsContent value="transactions">
          <p className="text-[13px] text-muted-foreground">Transactions for this member appear here.</p>
        </TabsContent>
      </Tabs>
    </div>
  )
}