whekin/household-bot
1
0
Fork 0
mirror of https://github.com/whekin/household-bot.git synced 2026-03-31 12:04:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(miniapp): redesign admin payment management

Browse Source
This commit is contained in:
whekin
2026-03-23 22:17:51 +04:00
parent 5af14e101e
commit 621bd75148
13 changed files with 983 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/miniapp/src/components/layout/shell.tsx
View File

@@ -5,6 +5,7 @@ import { Settings } from 'lucide-solid'
import { useSession } from '../../contexts/session-context'
import { useI18n } from '../../contexts/i18n-context'
import { useDashboard } from '../../contexts/dashboard-context'
import { formatCyclePeriod } from '../../lib/dates'
import { NavigationTabs } from './navigation-tabs'
import { Badge } from '../ui/badge'
import { Button, IconButton } from '../ui/button'
@@ -234,7 +235,9 @@ export function AppShell(props: ParentProps) {
</Show>
<article class="testing-card__section">
<span>{copy().testingPeriodCurrentLabel ?? ''}</span>
<strong>{dashboard()?.period ?? '—'}</strong>
<strong>
{dashboard()?.period ? formatCyclePeriod(dashboard()!.period, locale()) : '—'}
</strong>
</article>
<div class="testing-card__actions testing-card__actions--stack">
<Field label={copy().testingPeriodOverrideLabel ?? ''} wide>

54
apps/miniapp/src/demo/miniapp-demo.ts
View File

@@ -377,6 +377,59 @@ function createDashboard(state: {
members: MiniAppDashboard['members']
ledger?: MiniAppDashboard['ledger']
}): MiniAppDashboard {
const paymentPeriods: MiniAppDashboard['paymentPeriods'] = [
{
period: '2026-03',
utilityTotalMajor: '286.00',
hasOverdueBalance: state.members.some((member) => member.overduePayments.length > 0),
isCurrentPeriod: true,
kinds: [
{
kind: 'rent',
totalDueMajor: state.members
.reduce((sum, member) => sum + Number(member.rentShareMajor), 0)
.toFixed(2),
totalPaidMajor: '0.00',
totalRemainingMajor: state.members
.reduce((sum, member) => sum + Number(member.rentShareMajor), 0)
.toFixed(2),
unresolvedMembers: state.members
.filter((member) => Number(member.rentShareMajor) > 0)
.map((member) => ({
memberId: member.memberId,
displayName: member.displayName,
suggestedAmountMajor: member.rentShareMajor,
baseDueMajor: member.rentShareMajor,
paidMajor: '0.00',
remainingMajor: member.rentShareMajor,
effectivelySettled: false
}))
},
{
kind: 'utilities',
totalDueMajor: state.members
.reduce((sum, member) => sum + Number(member.utilityShareMajor), 0)
.toFixed(2),
totalPaidMajor: '0.00',
totalRemainingMajor: state.members
.reduce((sum, member) => sum + Number(member.utilityShareMajor), 0)
.toFixed(2),
unresolvedMembers: state.members
.filter((member) => Number(member.utilityShareMajor) > 0)
.map((member) => ({
memberId: member.memberId,
displayName: member.displayName,
suggestedAmountMajor: member.utilityShareMajor,
baseDueMajor: member.utilityShareMajor,
paidMajor: '0.00',
remainingMajor: member.utilityShareMajor,
effectivelySettled: false
}))
}
]
}
]
return {
period: '2026-03',
currency: 'GEL',
@@ -396,6 +449,7 @@ function createDashboard(state: {
rentFxRateMicros: '2760000',
rentFxEffectiveDate: '2026-03-17',
members: state.members,
paymentPeriods,
ledger: state.ledger ?? baseLedger()
}
}

24
apps/miniapp/src/i18n.ts
View File

@@ -133,6 +133,7 @@ export const dictionary = {
purchasesTitle: 'Shared purchases',
purchasesEmpty: 'No shared purchases recorded for this cycle yet.',
utilityLedgerTitle: 'Utility bills',
utilityHistoryTitle: 'Utilities by period',
utilityLedgerEmpty: 'No utility bills recorded for this cycle yet.',
paymentsTitle: 'Payments',
paymentsEmpty: 'No payment confirmations recorded for this cycle yet.',
@@ -193,8 +194,17 @@ export const dictionary = {
purchaseEditorBody: 'Review the purchase details and adjust the split only when needed.',
purchasePayerLabel: 'Paid by',
paymentsAdminTitle: 'Payments',
paymentsAdminBody: 'Add, fix, or remove payment records for the current cycle.',
paymentsAdminBody:
'Resolve open rent and utility obligations period by period, or add a custom payment when needed.',
paymentsAddAction: 'Add payment',
paymentsResolveAction: 'Resolve',
paymentsCustomAmountAction: 'Custom amount',
paymentsHistoryTitle: 'Payment history',
paymentsPeriodTitle: 'Period {period}',
paymentsPeriodCurrentBody: 'Current payment obligations for this billing period.',
paymentsPeriodOverdueBody: 'This period still has overdue base rent or utility payments.',
paymentsPeriodHistoryBody: 'Review and resolve older payment periods from here.',
paymentsBaseDueLabel: 'Base due {amount} · Remaining {remaining}',
copiedToast: 'Copied!',
quickPaymentTitle: 'Record payment',
quickPaymentBody: 'Quickly record a {type} payment for the current cycle.',
@@ -513,6 +523,7 @@ export const dictionary = {
purchasesTitle: 'Общие покупки',
purchasesEmpty: 'Пока нет общих покупок в этом цикле.',
utilityLedgerTitle: 'Коммунальные платежи',
utilityHistoryTitle: 'Коммуналка по периодам',
utilityLedgerEmpty: 'Пока нет коммунальных платежей в этом цикле.',
paymentsTitle: 'Оплаты',
paymentsEmpty: 'В этом цикле пока нет подтверждённых оплат.',
@@ -575,8 +586,17 @@ export const dictionary = {
'Проверь покупку и меняй детали разделения только если это действительно нужно.',
purchasePayerLabel: 'Оплатил',
paymentsAdminTitle: 'Оплаты',
paymentsAdminBody: 'Добавляй, исправляй или удаляй оплаты за текущий цикл.',
paymentsAdminBody:
'Закрывай открытые платежи по аренде и коммуналке по периодам или добавляй оплату с произвольной суммой.',
paymentsAddAction: 'Добавить оплату',
paymentsResolveAction: 'Закрыть',
paymentsCustomAmountAction: 'Своя сумма',
paymentsHistoryTitle: 'История оплат',
paymentsPeriodTitle: 'Период {period}',
paymentsPeriodCurrentBody: 'Текущие обязательства по оплатам за этот биллинговый период.',
paymentsPeriodOverdueBody: 'В этом периоде остались просроченные базовые оплаты.',
paymentsPeriodHistoryBody: 'Здесь можно быстро проверить и закрыть старые периоды.',
paymentsBaseDueLabel: 'База {amount} · Осталось {remaining}',
copiedToast: 'Скопировано!',
quickPaymentTitle: 'Записать оплату',
quickPaymentBody: 'Быстро запиши оплату {type} за текущий цикл.',

30
apps/miniapp/src/index.css
View File

@@ -589,11 +589,13 @@ a {
.ui-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 8px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
background: var(--accent-soft);
color: var(--accent);
border: none;
@@ -739,7 +741,8 @@ a {
transition: transform var(--transition-base);
}
.ui-collapsible[data-expanded] .ui-collapsible__chevron {
.ui-collapsible__trigger[data-expanded] .ui-collapsible__chevron,
.ui-collapsible__trigger[aria-expanded='true'] .ui-collapsible__chevron {
transform: rotate(180deg);
}
@@ -1532,6 +1535,15 @@ a {
flex-direction: column;
}
.editable-list-section-title {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: var(--spacing-sm);
}
.editable-list-row {
display: flex;
justify-content: space-between;
@@ -1554,6 +1566,15 @@ a {
background: var(--bg-input);
}
.editable-list-row--static {
cursor: default;
}
.editable-list-row--stacked {
align-items: flex-start;
gap: var(--spacing-sm);
}
.editable-list-row:disabled {
cursor: default;
}
@@ -1591,6 +1612,13 @@ a {
font-variant-numeric: tabular-nums;
}
.editable-list-inline-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--spacing-xs);
}
.editable-list-row__secondary {
font-size: var(--text-xs);
color: var(--text-muted);

52
apps/miniapp/src/lib/ledger-helpers.ts
View File

@@ -99,6 +99,25 @@ export function ledgerSecondaryAmount(entry: MiniAppDashboard['ledger'][number])
return `${entry.amountMajor} ${entry.currency}`
}
export function localizedCurrencyLabel(
locale: 'en' | 'ru',
currency: MiniAppDashboard['currency']
): string {
if (locale === 'ru' && currency === 'GEL') {
return 'Лари'
}
return currency
}
export function formatMoneyLabel(
amountMajor: string,
currency: MiniAppDashboard['currency'],
locale: 'en' | 'ru'
): string {
return `${amountMajor} ${localizedCurrencyLabel(locale, currency)}`
}
export function cycleUtilityBillDrafts(
bills: MiniAppAdminCycleState['utilityBills']
): Record<string, UtilityBillDraft> {
@@ -407,29 +426,30 @@ export function resolvedMemberAbsencePolicy(
* Bug #5 fix: Prefill with the remaining amount for the selected payment kind.
*/
export function computePaymentPrefill(
member: MiniAppDashboard['members'][number] | null | undefined,
kind: 'rent' | 'utilities'
dashboard: MiniAppDashboard | null | undefined,
memberId: string,
kind: 'rent' | 'utilities',
period: string
): string {
if (!member) {
if (!dashboard) {
return ''
}
const rentMinor = majorStringToMinor(member.rentShareMajor)
const utilityMinor = majorStringToMinor(member.utilityShareMajor)
const remainingMinor = majorStringToMinor(member.remainingMajor)
if (remainingMinor <= 0n) {
const periodSummary = (dashboard.paymentPeriods ?? []).find((entry) => entry.period === period)
const kindSummary = periodSummary?.kinds.find((entry) => entry.kind === kind)
const memberSummary = kindSummary?.unresolvedMembers.find((entry) => entry.memberId === memberId)
if (!memberSummary) {
return '0.00'
}
// Estimate unpaid per kind (simplified: if total due matches,
// use share for that kind as an approximation)
const dueMinor = kind === 'rent' ? rentMinor : utilityMinor
if (dueMinor <= 0n) {
return '0.00'
let prefillMinor = majorStringToMinor(memberSummary.remainingMajor)
if (periodSummary?.isCurrentPeriod && dashboard.paymentBalanceAdjustmentPolicy === kind) {
const member = dashboard.members.find((entry) => entry.memberId === memberId)
const purchaseOffsetMinor = majorStringToMinor(member?.purchaseOffsetMajor ?? '0.00')
if (purchaseOffsetMinor > 0n) {
prefillMinor += purchaseOffsetMinor
}
}
// If remaining is less than due for this kind, use remaining
const prefillMinor = remainingMinor < dueMinor ? remainingMinor : dueMinor
return minorToMajorString(prefillMinor)
return minorToMajorString(prefillMinor > 0n ? prefillMinor : 0n)
}

21
apps/miniapp/src/miniapp-api.ts
View File

@@ -137,6 +137,27 @@ export interface MiniAppDashboard {
}[]
explanations: readonly string[]
}[]
paymentPeriods?: {
period: string
utilityTotalMajor: string
hasOverdueBalance: boolean
isCurrentPeriod: boolean
kinds: {
kind: 'rent' | 'utilities'
totalDueMajor: string
totalPaidMajor: string
totalRemainingMajor: string
unresolvedMembers: {
memberId: string
displayName: string
suggestedAmountMajor: string
baseDueMajor: string
paidMajor: string
remainingMajor: string
effectivelySettled: boolean
}[]
}[]
}[]
ledger: {
id: string
kind: 'purchase' | 'utility' | 'payment'

89
apps/miniapp/src/routes/home.tsx
View File

@@ -13,11 +13,12 @@ import { Input } from '../components/ui/input'
import { Modal } from '../components/ui/dialog'
import { Toast } from '../components/ui/toast'
import { Skeleton } from '../components/ui/skeleton'
import { ledgerPrimaryAmount } from '../lib/ledger-helpers'
import { formatMoneyLabel, localizedCurrencyLabel } from '../lib/ledger-helpers'
import { majorStringToMinor, minorToMajorString } from '../lib/money'
import {
compareTodayToPeriodDay,
daysUntilPeriodDay,
formatCyclePeriod,
formatPeriodDay,
nextCyclePeriod,
parseCalendarDate
@@ -50,11 +51,17 @@ function paymentProposalMinor(
? majorStringToMinor(member.rentShareMajor)
: majorStringToMinor(member.utilityShareMajor)
if (data.paymentBalanceAdjustmentPolicy === kind) {
return baseMinor + purchaseOffsetMinor
const proposalMinor =
data.paymentBalanceAdjustmentPolicy === kind ? baseMinor + purchaseOffsetMinor : baseMinor
if (kind !== 'rent' || proposalMinor <= 0n) {
return proposalMinor
}
return baseMinor
const wholeMinor = proposalMinor / 100n
const remainderMinor = proposalMinor % 100n
return (remainderMinor >= 50n ? wholeMinor + 1n : wholeMinor) * 100n
}
function paymentRemainingMinor(
@@ -380,7 +387,10 @@ export default function HomeRoute() {
paymentRemainingMinor(data(), member(), 'utilities')
const modes = () => currentPaymentModes()
const currency = () => data().currency
const formatMajorAmount = (
amountMajor: string,
currencyCode: 'USD' | 'GEL' = data().currency
) => formatMoneyLabel(amountMajor, currencyCode, locale())
const timezone = () => data().timezone
const period = () => effectivePeriod() ?? data().period
const today = () => todayOverride()
@@ -470,15 +480,17 @@ export default function HomeRoute() {
<div class="balance-card__amounts">
<div class="balance-card__row balance-card__row--subtotal">
<span>{copy().finalDue}</span>
<strong>
{overdue().amountMajor} {currency()}
</strong>
<strong>{formatMajorAmount(overdue().amountMajor)}</strong>
</div>
<div class="balance-card__row">
<span>
{copy().homeOverduePeriodsLabel.replace(
'{periods}',
overdue().periods.join(', ')
overdue()
.periods.map((period) =>
formatCyclePeriod(period, locale())
)
.join(', ')
)}
</span>
</div>
@@ -513,15 +525,17 @@ export default function HomeRoute() {
<div class="balance-card__amounts">
<div class="balance-card__row balance-card__row--subtotal">
<span>{copy().finalDue}</span>
<strong>
{overdue().amountMajor} {currency()}
</strong>
<strong>{formatMajorAmount(overdue().amountMajor)}</strong>
</div>
<div class="balance-card__row">
<span>
{copy().homeOverduePeriodsLabel.replace(
'{periods}',
overdue().periods.join(', ')
overdue()
.periods.map((period) =>
formatCyclePeriod(period, locale())
)
.join(', ')
)}
</span>
</div>
@@ -552,7 +566,7 @@ export default function HomeRoute() {
<div class="balance-card__row balance-card__row--subtotal">
<span>{copy().finalDue}</span>
<strong>
{minorToMajorString(utilitiesRemainingMinor())} {currency()}
{formatMajorAmount(minorToMajorString(utilitiesRemainingMinor()))}
</strong>
</div>
<div class="balance-card__row">
@@ -563,30 +577,30 @@ export default function HomeRoute() {
</div>
<div class="balance-card__row">
<span>{copy().baseDue}</span>
<strong>
{member().utilityShareMajor} {currency()}
</strong>
<strong>{formatMajorAmount(member().utilityShareMajor)}</strong>
</div>
<Show when={policy() === 'utilities'}>
<div class="balance-card__row">
<span>{copy().balanceAdjustmentLabel}</span>
<strong>
{member().purchaseOffsetMajor} {currency()}
</strong>
<strong>{formatMajorAmount(member().purchaseOffsetMajor)}</strong>
</div>
</Show>
<Show when={utilityLedger().length > 0}>
<div class="balance-card__row balance-card__row--subtotal">
<span>{copy().homeUtilitiesBillsTitle}</span>
<strong>
{utilityTotalMajor()} {currency()}
</strong>
<strong>{formatMajorAmount(utilityTotalMajor())}</strong>
</div>
<For each={utilityLedger()}>
{(entry) => (
<div class="balance-card__row">
<span>{entry.title}</span>
<strong>{ledgerPrimaryAmount(entry)}</strong>
<strong>
{formatMoneyLabel(
entry.displayAmountMajor,
entry.displayCurrency,
locale()
)}
</strong>
</div>
)}
</For>
@@ -617,7 +631,7 @@ export default function HomeRoute() {
<div class="balance-card__row balance-card__row--subtotal">
<span>{copy().finalDue}</span>
<strong>
{minorToMajorString(rentRemainingMinor())} {currency()}
{formatMajorAmount(minorToMajorString(rentRemainingMinor()))}
</strong>
</div>
<div class="balance-card__row">
@@ -626,16 +640,12 @@ export default function HomeRoute() {
</div>
<div class="balance-card__row">
<span>{copy().baseDue}</span>
<strong>
{member().rentShareMajor} {currency()}
</strong>
<strong>{formatMajorAmount(member().rentShareMajor)}</strong>
</div>
<Show when={policy() === 'rent'}>
<div class="balance-card__row">
<span>{copy().balanceAdjustmentLabel}</span>
<strong>
{member().purchaseOffsetMajor} {currency()}
</strong>
<strong>{formatMajorAmount(member().purchaseOffsetMajor)}</strong>
</div>
</Show>
</div>
@@ -924,7 +934,13 @@ export default function HomeRoute() {
{(entry) => (
<div class="activity-card__item">
<span class="activity-card__title">{entry.title}</span>
<span class="activity-card__amount">{ledgerPrimaryAmount(entry)}</span>
<span class="activity-card__amount">
{formatMoneyLabel(
entry.displayAmountMajor,
entry.displayCurrency,
locale()
)}
</span>
</div>
)}
</For>
@@ -997,7 +1013,14 @@ export default function HomeRoute() {
/>
</Field>
<Field label={copy().quickPaymentCurrencyLabel}>
<Input type="text" value={(dashboard()?.currency as 'USD' | 'GEL') ?? 'GEL'} disabled />
<Input
type="text"
value={localizedCurrencyLabel(
locale(),
(dashboard()?.currency as 'USD' | 'GEL') ?? 'GEL'
)}
disabled
/>
</Field>
</div>
</Modal>

474
apps/miniapp/src/routes/ledger.tsx
View File

@@ -15,17 +15,19 @@ import { Collapsible } from '../components/ui/collapsible'
import { Toggle } from '../components/ui/toggle'
import { Skeleton } from '../components/ui/skeleton'
import {
ledgerPrimaryAmount,
formatMoneyLabel,
ledgerSecondaryAmount,
purchaseDraftForEntry,
paymentDraftForEntry,
computePaymentPrefill,
localizedCurrencyLabel,
rebalancePurchaseSplit,
validatePurchaseDraft,
type PurchaseDraft,
type PaymentDraft
} from '../lib/ledger-helpers'
import { minorToMajorString, majorStringToMinor } from '../lib/money'
import { formatCyclePeriod, formatFriendlyDate } from '../lib/dates'
import {
addMiniAppPurchase,
updateMiniAppPurchase,
@@ -39,6 +41,10 @@ import {
type MiniAppDashboard
} from '../miniapp-api'
function joinSubtitleParts(parts: readonly (string | null | undefined)[]): string {
return parts.filter(Boolean).join(' · ')
}
interface ParticipantSplitInputsProps {
draft: PurchaseDraft
updateDraft: (fn: (d: PurchaseDraft) => PurchaseDraft) => void
@@ -203,7 +209,7 @@ function ParticipantSplitInputs(props: ParticipantSplitInputsProps) {
export default function LedgerRoute() {
const { initData, refreshHouseholdData, session } = useSession()
const { copy } = useI18n()
const { copy, locale } = useI18n()
const { dashboard, loading, effectiveIsAdmin, purchaseLedger, utilityLedger, paymentLedger } =
useDashboard()
const unresolvedPurchaseLedger = createMemo(() =>
@@ -214,26 +220,15 @@ export default function LedgerRoute() {
)
const paymentPeriodOptions = createMemo(() => {
const periods = new Set<string>()
if (dashboard()?.period) {
periods.add(dashboard()!.period)
for (const summary of dashboard()?.paymentPeriods ?? []) {
periods.add(summary.period)
}
for (const entry of purchaseLedger()) {
if (entry.originPeriod) {
periods.add(entry.originPeriod)
}
}
for (const member of dashboard()?.members ?? []) {
for (const overdue of member.overduePayments) {
for (const period of overdue.periods) {
periods.add(period)
}
}
}
return [...periods].sort().map((period) => ({ value: period, label: period }))
return [...periods]
.sort()
.map((period) => ({ value: period, label: formatCyclePeriod(period, locale()) }))
})
const paymentPeriodSummaries = createMemo(() => dashboard()?.paymentPeriods ?? [])
// ── Purchase editor ──────────────────────────────
const [editingPurchase, setEditingPurchase] = createSignal<
@@ -294,6 +289,7 @@ export default function LedgerRoute() {
period: dashboard()?.period ?? ''
})
const [addingPayment, setAddingPayment] = createSignal(false)
const [paymentActionError, setPaymentActionError] = createSignal<string | null>(null)
const addPurchaseButtonText = createMemo(() => {
if (addingPurchase()) return copy().savingPurchase
@@ -543,6 +539,7 @@ export default function LedgerRoute() {
setAddingPayment(true)
try {
setPaymentActionError(null)
await addMiniAppPayment(data, {
memberId: draft.memberId,
kind: draft.kind,
@@ -559,13 +556,58 @@ export default function LedgerRoute() {
period: dashboard()?.period ?? ''
})
await refreshHouseholdData(true, true)
} catch (error) {
setPaymentActionError(error instanceof Error ? error.message : copy().quickPaymentFailed)
} finally {
setAddingPayment(false)
}
}
async function handleResolveSuggestedPayment(input: {
memberId: string
kind: 'rent' | 'utilities'
period: string
amountMajor: string
}) {
const data = initData()
if (!data) return
setAddingPayment(true)
try {
setPaymentActionError(null)
await addMiniAppPayment(data, {
memberId: input.memberId,
kind: input.kind,
period: input.period,
amountMajor: input.amountMajor,
currency: (dashboard()?.currency as 'USD' | 'GEL') ?? 'GEL'
})
await refreshHouseholdData(true, true)
} catch (error) {
setPaymentActionError(error instanceof Error ? error.message : copy().quickPaymentFailed)
} finally {
setAddingPayment(false)
}
}
function openCustomPayment(input: {
memberId: string
kind: 'rent' | 'utilities'
period: string
}) {
setPaymentActionError(null)
setNewPayment({
memberId: input.memberId,
kind: input.kind,
amountMajor: computePaymentPrefill(dashboard(), input.memberId, input.kind, input.period),
currency: (dashboard()?.currency as 'USD' | 'GEL') ?? 'GEL',
period: input.period
})
setAddPaymentOpen(true)
}
const currencyOptions = () => [
{ value: 'GEL', label: 'GEL' },
{ value: 'GEL', label: localizedCurrencyLabel(locale(), 'GEL') },
{ value: 'USD', label: 'USD' }
]
@@ -648,7 +690,9 @@ export default function LedgerRoute() {
>
<div style={{ display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
<div>
<strong>{copy().unresolvedPurchasesTitle}</strong>
<div class="editable-list-section-title">
{copy().unresolvedPurchasesTitle}
</div>
<Show
when={unresolvedPurchaseLedger().length > 0}
fallback={<p class="empty-state">{copy().unresolvedPurchasesEmpty}</p>}
@@ -664,13 +708,23 @@ export default function LedgerRoute() {
<div class="editable-list-row__main">
<span class="editable-list-row__title">{entry.title}</span>
<span class="editable-list-row__subtitle">
{[entry.actorDisplayName, entry.originPeriod, 'Unresolved']
.filter(Boolean)
.join(' · ')}
{joinSubtitleParts([
entry.actorDisplayName,
entry.originPeriod
? formatCyclePeriod(entry.originPeriod, locale())
: null,
'Unresolved'
])}
</span>
</div>
<div class="editable-list-row__meta">
<strong>{ledgerPrimaryAmount(entry)}</strong>
<strong>
{formatMoneyLabel(
entry.displayAmountMajor,
entry.displayCurrency,
locale()
)}
</strong>
<Show when={ledgerSecondaryAmount(entry)}>
{(secondary) => (
<span class="editable-list-row__secondary">
@@ -686,8 +740,7 @@ export default function LedgerRoute() {
</Show>
</div>
<div>
<strong>{copy().resolvedPurchasesTitle}</strong>
<Collapsible title={copy().resolvedPurchasesTitle} defaultOpen={false}>
<Show
when={resolvedPurchaseLedger().length > 0}
fallback={<p class="empty-state">{copy().resolvedPurchasesEmpty}</p>}
@@ -703,13 +756,25 @@ export default function LedgerRoute() {
<div class="editable-list-row__main">
<span class="editable-list-row__title">{entry.title}</span>
<span class="editable-list-row__subtitle">
{[entry.actorDisplayName, entry.originPeriod, entry.resolvedAt]
.filter(Boolean)
.join(' · ')}
{joinSubtitleParts([
entry.actorDisplayName,
entry.originPeriod
? formatCyclePeriod(entry.originPeriod, locale())
: null,
entry.resolvedAt
? formatFriendlyDate(entry.resolvedAt, locale())
: null
])}
</span>
</div>
<div class="editable-list-row__meta">
<strong>{ledgerPrimaryAmount(entry)}</strong>
<strong>
{formatMoneyLabel(
entry.displayAmountMajor,
entry.displayCurrency,
locale()
)}
</strong>
<Show when={ledgerSecondaryAmount(entry)}>
{(secondary) => (
<span class="editable-list-row__secondary">
@@ -723,47 +788,91 @@ export default function LedgerRoute() {
</For>
</div>
</Show>
</div>
</Collapsible>
</div>
</Show>
</Collapsible>
{/* ── Utility bills ──────────────────────── */}
<Collapsible title={copy().utilityLedgerTitle}>
<Show when={effectiveIsAdmin()}>
<div class="editable-list-actions">
<Button variant="primary" size="sm" onClick={() => setAddUtilityOpen(true)}>
<Plus size={14} />
{copy().addUtilityBillAction}
</Button>
</div>
</Show>
<Show
when={utilityLedger().length > 0}
fallback={<p class="empty-state">{copy().utilityLedgerEmpty}</p>}
>
<div class="editable-list">
<For each={utilityLedger()}>
{(entry) => (
<button
class="editable-list-row"
onClick={() => effectiveIsAdmin() && openUtilityEditor(entry)}
disabled={!effectiveIsAdmin()}
>
<div class="editable-list-row__main">
<span class="editable-list-row__title">{entry.title}</span>
<span class="editable-list-row__subtitle">
{entry.actorDisplayName}
</span>
</div>
<div class="editable-list-row__meta">
<strong>{ledgerPrimaryAmount(entry)}</strong>
</div>
</button>
)}
</For>
</div>
</Show>
<div style={{ display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
<Show when={effectiveIsAdmin()}>
<div class="editable-list-actions">
<Button variant="primary" size="sm" onClick={() => setAddUtilityOpen(true)}>
<Plus size={14} />
{copy().addUtilityBillAction}
</Button>
</div>
</Show>
<Show
when={utilityLedger().length > 0}
fallback={<p class="empty-state">{copy().utilityLedgerEmpty}</p>}
>
<div class="editable-list">
<For each={utilityLedger()}>
{(entry) => (
<button
class="editable-list-row"
onClick={() => effectiveIsAdmin() && openUtilityEditor(entry)}
disabled={!effectiveIsAdmin()}
>
<div class="editable-list-row__main">
<span class="editable-list-row__title">{entry.title}</span>
<span class="editable-list-row__subtitle">
{entry.actorDisplayName}
</span>
</div>
<div class="editable-list-row__meta">
<strong>
{formatMoneyLabel(
entry.displayAmountMajor,
entry.displayCurrency,
locale()
)}
</strong>
</div>
</button>
)}
</For>
</div>
</Show>
<Collapsible title={copy().utilityHistoryTitle} defaultOpen={false}>
<Show
when={paymentPeriodSummaries().length > 0}
fallback={<p class="empty-state">{copy().utilityLedgerEmpty}</p>}
>
<div class="editable-list">
<For each={paymentPeriodSummaries()}>
{(summary) => (
<div class="editable-list-row editable-list-row--static">
<div class="editable-list-row__main">
<span class="editable-list-row__title">
{formatCyclePeriod(summary.period, locale())}
</span>
<span class="editable-list-row__subtitle">
{summary.isCurrentPeriod
? copy().currentCycleLabel
: summary.hasOverdueBalance
? copy().overdueLabel
: copy().homeSettledTitle}
</span>
</div>
<div class="editable-list-row__meta">
<strong>
{formatMoneyLabel(
summary.utilityTotalMajor,
(dashboard()?.currency as 'USD' | 'GEL') ?? 'GEL',
locale()
)}
</strong>
</div>
</div>
)}
</For>
</div>
</Show>
</Collapsible>
</div>
</Collapsible>
{/* ── Payments ───────────────────────────── */}
@@ -776,7 +885,7 @@ export default function LedgerRoute() {
<Show when={effectiveIsAdmin()}>
<div class="editable-list-actions">
<Button
variant="primary"
variant="ghost"
size="sm"
onClick={() => {
setNewPayment((payment) => ({
@@ -791,34 +900,186 @@ export default function LedgerRoute() {
</Button>
</div>
</Show>
<Show when={paymentActionError()}>
{(error) => <p class="empty-state">{error()}</p>}
</Show>
<Show
when={paymentLedger().length > 0}
when={paymentPeriodSummaries().length > 0}
fallback={<p class="empty-state">{copy().paymentsEmpty}</p>}
>
<div class="editable-list">
<For each={paymentLedger()}>
{(entry) => (
<button
class="editable-list-row"
onClick={() => effectiveIsAdmin() && openPaymentEditor(entry)}
disabled={!effectiveIsAdmin()}
<div style={{ display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
<For each={paymentPeriodSummaries()}>
{(summary) => (
<Collapsible
title={copy().paymentsPeriodTitle.replace(
'{period}',
formatCyclePeriod(summary.period, locale())
)}
body={
summary.hasOverdueBalance
? copy().paymentsPeriodOverdueBody
: summary.isCurrentPeriod
? copy().paymentsPeriodCurrentBody
: copy().paymentsPeriodHistoryBody
}
defaultOpen={summary.isCurrentPeriod || summary.hasOverdueBalance}
>
<div class="editable-list-row__main">
<span class="editable-list-row__title">
{entry.paymentKind === 'rent'
? copy().paymentLedgerRent
: copy().paymentLedgerUtilities}
</span>
<span class="editable-list-row__subtitle">
{entry.actorDisplayName}
</span>
<div style={{ display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
<For each={summary.kinds}>
{(kindSummary) => (
<Show
when={kindSummary.unresolvedMembers.length > 0}
fallback={
<div class="editable-list-row editable-list-row--static">
<div class="editable-list-row__main">
<span class="editable-list-row__title">
{kindSummary.kind === 'rent'
? copy().shareRent
: copy().shareUtilities}
</span>
<span class="editable-list-row__subtitle">
{copy().homeSettledTitle}
</span>
</div>
<div class="editable-list-row__meta">
<strong>
{formatMoneyLabel(
kindSummary.totalPaidMajor,
(dashboard()?.currency as 'USD' | 'GEL') ?? 'GEL',
locale()
)}
</strong>
</div>
</div>
}
>
<div>
<div class="editable-list-section-title">
{kindSummary.kind === 'rent'
? copy().shareRent
: copy().shareUtilities}
</div>
<div class="editable-list">
<For each={kindSummary.unresolvedMembers}>
{(memberSummary) => (
<div class="editable-list-row editable-list-row--stacked">
<div class="editable-list-row__main">
<span class="editable-list-row__title">
{memberSummary.displayName}
</span>
<span class="editable-list-row__subtitle">
{copy()
.paymentsBaseDueLabel.replace(
'{amount}',
formatMoneyLabel(
memberSummary.baseDueMajor,
(dashboard()?.currency as 'USD' | 'GEL') ??
'GEL',
locale()
)
)
.replace(
'{remaining}',
formatMoneyLabel(
memberSummary.remainingMajor,
(dashboard()?.currency as 'USD' | 'GEL') ??
'GEL',
locale()
)
)}
</span>
</div>
<div class="editable-list-row__meta">
<strong>
{formatMoneyLabel(
memberSummary.suggestedAmountMajor,
(dashboard()?.currency as 'USD' | 'GEL') ?? 'GEL',
locale()
)}
</strong>
<div class="editable-list-inline-actions">
<Button
variant="primary"
size="sm"
loading={addingPayment()}
onClick={() =>
void handleResolveSuggestedPayment({
memberId: memberSummary.memberId,
kind: kindSummary.kind,
period: summary.period,
amountMajor:
memberSummary.suggestedAmountMajor
})
}
>
{copy().paymentsResolveAction}
</Button>
<Button
variant="ghost"
size="sm"
onClick={() =>
openCustomPayment({
memberId: memberSummary.memberId,
kind: kindSummary.kind,
period: summary.period
})
}
>
{copy().paymentsCustomAmountAction}
</Button>
</div>
</div>
</div>
)}
</For>
</div>
</div>
</Show>
)}
</For>
</div>
<div class="editable-list-row__meta">
<strong>{ledgerPrimaryAmount(entry)}</strong>
</div>
</button>
</Collapsible>
)}
</For>
<Collapsible title={copy().paymentsHistoryTitle} defaultOpen={false}>
<Show
when={paymentLedger().length > 0}
fallback={<p class="empty-state">{copy().paymentsEmpty}</p>}
>
<div class="editable-list">
<For each={paymentLedger()}>
{(entry) => (
<button
class="editable-list-row"
onClick={() => effectiveIsAdmin() && openPaymentEditor(entry)}
disabled={!effectiveIsAdmin()}
>
<div class="editable-list-row__main">
<span class="editable-list-row__title">
{entry.paymentKind === 'rent'
? copy().paymentLedgerRent
: copy().paymentLedgerUtilities}
</span>
<span class="editable-list-row__subtitle">
{entry.actorDisplayName}
</span>
</div>
<div class="editable-list-row__meta">
<strong>
{formatMoneyLabel(
entry.displayAmountMajor,
entry.displayCurrency,
locale()
)}
</strong>
</div>
</button>
)}
</For>
</div>
</Show>
</Collapsible>
</div>
</Show>
</Collapsible>
@@ -1093,6 +1354,7 @@ export default function LedgerRoute() {
</div>
}
>
<Show when={paymentActionError()}>{(error) => <p class="empty-state">{error()}</p>}</Show>
<div class="editor-grid">
<Field label={copy().paymentMember}>
<Select
@@ -1101,8 +1363,12 @@ export default function LedgerRoute() {
placeholder="—"
options={[{ value: '', label: '—' }, ...memberOptions()]}
onChange={(memberId) => {
const member = dashboard()?.members.find((m) => m.memberId === memberId)
const prefill = computePaymentPrefill(member, newPayment().kind)
const prefill = computePaymentPrefill(
dashboard(),
memberId,
newPayment().kind,
newPayment().period || dashboard()?.period || ''
)
setNewPayment((p) => ({ ...p, memberId, amountMajor: prefill }))
}}
/>
@@ -1113,7 +1379,18 @@ export default function LedgerRoute() {
ariaLabel={copy().paymentKind}
options={kindOptions()}
onChange={(value) =>
setNewPayment((p) => ({ ...p, kind: value as 'rent' | 'utilities' }))
setNewPayment((p) => ({
...p,
kind: value as 'rent' | 'utilities',
amountMajor: p.memberId
? computePaymentPrefill(
dashboard(),
p.memberId,
value as 'rent' | 'utilities',
p.period || dashboard()?.period || ''
)
: p.amountMajor
}))
}
/>
</Field>
@@ -1123,7 +1400,20 @@ export default function LedgerRoute() {
placeholder="—"
ariaLabel="Billing period"
options={[{ value: '', label: '—' }, ...paymentPeriodOptions()]}
onChange={(value) => setNewPayment((p) => ({ ...p, period: value }))}
onChange={(value) =>
setNewPayment((p) => ({
...p,
period: value,
amountMajor: p.memberId
? computePaymentPrefill(
dashboard(),
p.memberId,
p.kind,
value || dashboard()?.period || ''
)
: p.amountMajor
}))
}
/>
</Field>
<Field label={copy().paymentAmount}>

3
apps/miniapp/src/routes/settings.tsx
View File

@@ -5,6 +5,7 @@ import { useNavigate } from '@solidjs/router'
import { useSession } from '../contexts/session-context'
import { useI18n } from '../contexts/i18n-context'
import { useDashboard } from '../contexts/dashboard-context'
import { formatCyclePeriod } from '../lib/dates'
import { Card } from '../components/ui/card'
import { Button } from '../components/ui/button'
import { Badge } from '../components/ui/badge'
@@ -418,7 +419,7 @@ export default function SettingsRoute() {
<div class="settings-billing-summary">
<div class="settings-row">
<span>{copy().billingCyclePeriod}</span>
<Badge variant="accent">{cycle().period}</Badge>
<Badge variant="accent">{formatCyclePeriod(cycle().period, locale())}</Badge>
</div>
<div class="settings-row">
<span>{copy().currencyLabel}</span>