feat(payments): track household payment confirmations

apps/miniapp/src/App.tsx

@@ -160,6 +160,20 @@ function memberBaseDueMajor(member: MiniAppDashboard['members'][number]): string
   )
 }
 
+function memberRemainingClass(member: MiniAppDashboard['members'][number]): string {
+  const remainingMinor = majorStringToMinor(member.remainingMajor)
+
+  if (remainingMinor < 0n) {
+    return 'is-credit'
+  }
+
+  if (remainingMinor === 0n) {
+    return 'is-settled'
+  }
+
+  return 'is-due'
+}
+
 function ledgerPrimaryAmount(entry: MiniAppDashboard['ledger'][number]): string {
   return `${entry.displayAmountMajor} ${entry.displayCurrency}`
 }
@@ -405,6 +419,8 @@ function App() {
           period: '2026-03',
           currency: 'GEL',
           totalDueMajor: '1030.00',
+          totalPaidMajor: '501.00',
+          totalRemainingMajor: '529.00',
           rentSourceAmountMajor: '700.00',
           rentSourceCurrency: 'USD',
           rentDisplayAmountMajor: '1932.00',
@@ -418,6 +434,8 @@ function App() {
               utilityShareMajor: '32.00',
               purchaseOffsetMajor: '-14.00',
               netDueMajor: '501.00',
+              paidMajor: '501.00',
+              remainingMajor: '0.00',
               explanations: ['Equal utility split', 'Shared purchase offset']
             },
             {
@@ -427,6 +445,8 @@ function App() {
               utilityShareMajor: '32.00',
               purchaseOffsetMajor: '14.00',
               netDueMajor: '529.00',
+              paidMajor: '0.00',
+              remainingMajor: '529.00',
               explanations: ['Equal utility split']
             }
           ],
@@ -893,6 +913,18 @@ function App() {
                             {currentMemberLine()!.netDueMajor} {data.currency}
                           </strong>
                         </div>
+                        <div class="stat-card">
+                          <span>{copy().paidLabel}</span>
+                          <strong>
+                            {currentMemberLine()!.paidMajor} {data.currency}
+                          </strong>
+                        </div>
+                        <div class="stat-card">
+                          <span>{copy().remainingLabel}</span>
+                          <strong>
+                            {currentMemberLine()!.remainingMajor} {data.currency}
+                          </strong>
+                        </div>
                       </div>
                     </article>
                   ) : null}
@@ -907,7 +939,7 @@ function App() {
                       <header>
                         <strong>{member.displayName}</strong>
                         <span>
-                          {member.netDueMajor} {data.currency}
+                          {member.remainingMajor} {data.currency}
                         </span>
                       </header>
                       <p>
@@ -922,6 +954,12 @@ function App() {
                       <p>
                         {copy().shareOffset}: {member.purchaseOffsetMajor} {data.currency}
                       </p>
+                      <p>
+                        {copy().paidLabel}: {member.paidMajor} {data.currency}
+                      </p>
+                      <p class={`balance-status ${memberRemainingClass(member)}`}>
+                        {copy().remainingLabel}: {member.remainingMajor} {data.currency}
+                      </p>
                     </article>
                   ))}
                 </>
@@ -1554,6 +1592,18 @@ function App() {
                 {dashboard() ? `${dashboard()!.totalDueMajor} ${dashboard()!.currency}` : '—'}
               </strong>
             </article>
+            <article class="stat-card">
+              <span>{copy().paidLabel}</span>
+              <strong>
+                {dashboard() ? `${dashboard()!.totalPaidMajor} ${dashboard()!.currency}` : '—'}
+              </strong>
+            </article>
+            <article class="stat-card">
+              <span>{copy().remainingLabel}</span>
+              <strong>
+                {dashboard() ? `${dashboard()!.totalRemainingMajor} ${dashboard()!.currency}` : '—'}
+              </strong>
+            </article>
             <article class="stat-card">
               <span>{copy().membersCount}</span>
               <strong>{dashboardMemberCount(dashboard())}</strong>
@@ -1578,7 +1628,7 @@ function App() {
                 <header>
                   <strong>{copy().yourBalanceTitle}</strong>
                   <span>
-                    {currentMemberLine()!.netDueMajor} {dashboard()?.currency ?? ''}
+                    {currentMemberLine()!.remainingMajor} {dashboard()?.currency ?? ''}
                   </span>
                 </header>
                 <p>{copy().yourBalanceBody}</p>
@@ -1613,6 +1663,18 @@ function App() {
                       {currentMemberLine()!.netDueMajor} {dashboard()?.currency ?? ''}
                     </strong>
                   </div>
+                  <div class="stat-card">
+                    <span>{copy().paidLabel}</span>
+                    <strong>
+                      {currentMemberLine()!.paidMajor} {dashboard()?.currency ?? ''}
+                    </strong>
+                  </div>
+                  <div class="stat-card">
+                    <span>{copy().remainingLabel}</span>
+                    <strong>
+                      {currentMemberLine()!.remainingMajor} {dashboard()?.currency ?? ''}
+                    </strong>
+                  </div>
                 </div>
               </article>
             ) : (

apps/miniapp/src/i18n.ts

@@ -42,6 +42,8 @@ export const dictionary = {
     overviewBody:
       'Use the sections below to review balances, ledger entries, and household access.',
     totalDue: 'Total due',
+    paidLabel: 'Paid',
+    remainingLabel: 'Remaining',
     membersCount: 'Members',
     ledgerEntries: 'Ledger entries',
     pendingRequests: 'Pending requests',
@@ -159,6 +161,8 @@ export const dictionary = {
     overviewTitle: 'Текущий цикл',
     overviewBody: 'Ниже можно посмотреть балансы, записи леджера и доступ к household.',
     totalDue: 'Итого к оплате',
+    paidLabel: 'Оплачено',
+    remainingLabel: 'Осталось',
     membersCount: 'Участники',
     ledgerEntries: 'Записи леджера',
     pendingRequests: 'Ожидают подтверждения',

apps/miniapp/src/index.css

@@ -270,6 +270,18 @@ button {
   margin-top: 6px;
 }
 
+.balance-status.is-credit {
+  color: #95e2b0;
+}
+
+.balance-status.is-settled {
+  color: #d6d0c9;
+}
+
+.balance-status.is-due {
+  color: #f7b389;
+}
+
 .home-grid {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }

apps/miniapp/src/miniapp-api.ts

@@ -68,6 +68,8 @@ export interface MiniAppDashboard {
   period: string
   currency: 'USD' | 'GEL'
   totalDueMajor: string
+  totalPaidMajor: string
+  totalRemainingMajor: string
   rentSourceAmountMajor: string
   rentSourceCurrency: 'USD' | 'GEL'
   rentDisplayAmountMajor: string
@@ -80,6 +82,8 @@ export interface MiniAppDashboard {
     utilityShareMajor: string
     purchaseOffsetMajor: string
     netDueMajor: string
+    paidMajor: string
+    remainingMajor: string
     explanations: readonly string[]
   }[]
   ledger: {