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: add quick payment action and improve copy button UX

Browse Source 
Mini App Home Screen:
- Add 'Record Payment' button to utilities and rent period cards
- Pre-fill payment amount with member's share (rentShare/utilityShare)
- Modal dialog with amount input and currency display
- Toast notifications for copy and payment success/failure feedback

Copy Button Improvements:
- Increase spacing between icon and text (4px → 8px)
- Add hover background and padding for better touch target
- Green background highlight when copied (in addition to icon color change)
- Toast notification appears when copying any value

Backend:
- Add /api/miniapp/payments/add endpoint for quick payments
- Payment notifications sent to 'reminders' topic in Telegram
- Include member name, payment type, amount, and period in notification

Files:
- New: apps/miniapp/src/components/ui/toast.tsx
- Modified: apps/miniapp/src/routes/home.tsx, apps/miniapp/src/index.css,
  apps/miniapp/src/theme.css, apps/miniapp/src/i18n.ts,
  apps/bot/src/miniapp-billing.ts, apps/bot/src/server.ts

Quality Gates: ✅ format, lint, typecheck, build, test

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
whekin
2026-03-14 08:51:53 +04:00
parent 771d64aa4e
commit 488a488137
45 changed files with 2236 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/bot/src/anonymous-feedback.test.ts
View File

@@ -231,7 +231,8 @@ function createHouseholdConfigurationRepository(): HouseholdConfigurationReposit
rentWarningDay: 17,
utilitiesDueDay: 4,
utilitiesReminderDay: 3,
timezone: 'Asia/Tbilisi'
timezone: 'Asia/Tbilisi',
rentPaymentDestinations: null
}),
updateHouseholdBillingSettings: async (input) => ({
householdId: input.householdId,
@@ -242,7 +243,8 @@ function createHouseholdConfigurationRepository(): HouseholdConfigurationReposit
rentWarningDay: input.rentWarningDay ?? 17,
utilitiesDueDay: input.utilitiesDueDay ?? 4,
utilitiesReminderDay: input.utilitiesReminderDay ?? 3,
timezone: input.timezone ?? 'Asia/Tbilisi'
timezone: input.timezone ?? 'Asia/Tbilisi',
rentPaymentDestinations: input.rentPaymentDestinations ?? null
}),
listHouseholdUtilityCategories: async () => [],
upsertHouseholdUtilityCategory: async (input) => ({

3
apps/bot/src/bot-i18n.test.ts
View File

@@ -100,7 +100,8 @@ function createRepository(isAdmin = false): HouseholdConfigurationRepository {
rentWarningDay: 17,
utilitiesDueDay: 4,
utilitiesReminderDay: 3,
timezone: 'Asia/Tbilisi'
timezone: 'Asia/Tbilisi',
rentPaymentDestinations: null
}),
updateHouseholdBillingSettings: async () => {
throw new Error('not implemented')

6
apps/bot/src/dm-assistant.test.ts
View File

@@ -237,7 +237,8 @@ function createHouseholdRepository(): HouseholdConfigurationRepository {
rentWarningDay: 17,
utilitiesDueDay: 4,
utilitiesReminderDay: 3,
timezone: 'Asia/Tbilisi'
timezone: 'Asia/Tbilisi',
rentPaymentDestinations: null
}),
updateHouseholdBillingSettings: async () => {
throw new Error('not used')
@@ -342,9 +343,12 @@ function createFinanceService(): FinanceCommandService {
period: '2026-03',
currency: 'GEL',
timezone: 'Asia/Tbilisi',
rentWarningDay: 17,
rentDueDay: 20,
utilitiesReminderDay: 3,
utilitiesDueDay: 4,
paymentBalanceAdjustmentPolicy: 'utilities',
rentPaymentDestinations: null,
totalDue: Money.fromMajor('1000.00', 'GEL'),
totalPaid: Money.fromMajor('500.00', 'GEL'),
totalRemaining: Money.fromMajor('500.00', 'GEL'),

6
apps/bot/src/finance-commands.test.ts
View File

@@ -94,7 +94,8 @@ function createRepository(): HouseholdConfigurationRepository {
rentWarningDay: 17,
utilitiesDueDay: 4,
utilitiesReminderDay: 3,
timezone: 'Asia/Tbilisi'
timezone: 'Asia/Tbilisi',
rentPaymentDestinations: null
}),
updateHouseholdBillingSettings: async () => {
throw new Error('not implemented')
@@ -126,9 +127,12 @@ function createDashboard(): NonNullable<
period: '2026-03',
currency: 'GEL',
timezone: 'Asia/Tbilisi',
rentWarningDay: 17,
rentDueDay: 20,
utilitiesReminderDay: 3,
utilitiesDueDay: 4,
paymentBalanceAdjustmentPolicy: 'utilities',
rentPaymentDestinations: null,
totalDue: Money.fromMajor('400', 'GEL'),
totalPaid: Money.fromMajor('100', 'GEL'),
totalRemaining: Money.fromMajor('300', 'GEL'),

6
apps/bot/src/household-setup.test.ts
View File

@@ -463,7 +463,8 @@ function createHouseholdConfigurationRepository(): HouseholdConfigurationReposit
rentWarningDay: 17,
utilitiesDueDay: 4,
utilitiesReminderDay: 3,
timezone: 'Asia/Tbilisi'
timezone: 'Asia/Tbilisi',
rentPaymentDestinations: null
}
},
async updateHouseholdBillingSettings(input) {
@@ -476,7 +477,8 @@ function createHouseholdConfigurationRepository(): HouseholdConfigurationReposit
rentWarningDay: input.rentWarningDay ?? 17,
utilitiesDueDay: input.utilitiesDueDay ?? 4,
utilitiesReminderDay: input.utilitiesReminderDay ?? 3,
timezone: input.timezone ?? 'Asia/Tbilisi'
timezone: input.timezone ?? 'Asia/Tbilisi',
rentPaymentDestinations: input.rentPaymentDestinations ?? null
}
},
async listHouseholdUtilityCategories() {

10
apps/bot/src/index.ts
View File

@@ -73,6 +73,7 @@ import {
createMiniAppDeleteUtilityBillHandler,
createMiniAppOpenCycleHandler,
createMiniAppRentUpdateHandler,
createMiniAppSubmitUtilityBillHandler,
createMiniAppUpdatePaymentHandler,
createMiniAppUpdatePurchaseHandler,
createMiniAppUpdateUtilityBillHandler
@@ -714,6 +715,15 @@ const server = createBotWebhookServer({
logger: getLogger('miniapp-billing')
})
: undefined,
miniAppSubmitUtilityBill: householdOnboardingService
? createMiniAppSubmitUtilityBillHandler({
allowedOrigins: runtime.miniAppAllowedOrigins,
botToken: runtime.telegramBotToken,
onboardingService: householdOnboardingService,
financeServiceForHousehold,
logger: getLogger('miniapp-billing')
})
: undefined,
miniAppUpdateUtilityBill: householdOnboardingService
? createMiniAppUpdateUtilityBillHandler({
allowedOrigins: runtime.miniAppAllowedOrigins,

12
apps/bot/src/miniapp-admin.test.ts
View File

@@ -174,7 +174,8 @@ function onboardingRepository(): HouseholdConfigurationRepository {
rentWarningDay: 17,
utilitiesDueDay: 4,
utilitiesReminderDay: 3,
timezone: 'Asia/Tbilisi'
timezone: 'Asia/Tbilisi',
rentPaymentDestinations: null
}),
updateHouseholdBillingSettings: async (input) => ({
householdId: input.householdId,
@@ -185,7 +186,8 @@ function onboardingRepository(): HouseholdConfigurationRepository {
rentWarningDay: input.rentWarningDay ?? 17,
utilitiesDueDay: input.utilitiesDueDay ?? 4,
utilitiesReminderDay: input.utilitiesReminderDay ?? 3,
timezone: input.timezone ?? 'Asia/Tbilisi'
timezone: input.timezone ?? 'Asia/Tbilisi',
rentPaymentDestinations: input.rentPaymentDestinations ?? null
}),
getHouseholdAssistantConfig: async (householdId) => ({
householdId,
@@ -536,7 +538,8 @@ describe('createMiniAppSettingsHandler', () => {
utilitiesDueDay: 4,
utilitiesReminderDay: 3,
timezone: 'Asia/Tbilisi',
paymentBalanceAdjustmentPolicy: 'utilities'
paymentBalanceAdjustmentPolicy: 'utilities',
rentPaymentDestinations: null
},
assistantConfig: {
householdId: 'household-1',
@@ -638,7 +641,8 @@ describe('createMiniAppUpdateSettingsHandler', () => {
utilitiesDueDay: 6,
utilitiesReminderDay: 5,
timezone: 'Asia/Tbilisi',
paymentBalanceAdjustmentPolicy: 'utilities'
paymentBalanceAdjustmentPolicy: 'utilities',
rentPaymentDestinations: null
},
assistantConfig: {
householdId: 'household-1',

15
apps/bot/src/miniapp-admin.ts
View File

@@ -59,6 +59,7 @@ async function readSettingsUpdatePayload(request: Request): Promise<{
utilitiesDueDay: number
utilitiesReminderDay: number
timezone: string
rentPaymentDestinations?: unknown
assistantContext?: string
assistantTone?: string
}> {
@@ -80,6 +81,7 @@ async function readSettingsUpdatePayload(request: Request): Promise<{
utilitiesDueDay?: number
utilitiesReminderDay?: number
timezone?: string
rentPaymentDestinations?: unknown
assistantContext?: string
assistantTone?: string
}
@@ -136,6 +138,11 @@ async function readSettingsUpdatePayload(request: Request): Promise<{
assistantTone: parsed.assistantTone
}
: {}),
...(parsed.rentPaymentDestinations !== undefined
? {
rentPaymentDestinations: parsed.rentPaymentDestinations
}
: {}),
rentDueDay: parsed.rentDueDay,
rentWarningDay: parsed.rentWarningDay,
utilitiesDueDay: parsed.utilitiesDueDay,
@@ -369,7 +376,8 @@ function serializeBillingSettings(settings: HouseholdBillingSettingsRecord) {
rentWarningDay: settings.rentWarningDay,
utilitiesDueDay: settings.utilitiesDueDay,
utilitiesReminderDay: settings.utilitiesReminderDay,
timezone: settings.timezone
timezone: settings.timezone,
rentPaymentDestinations: settings.rentPaymentDestinations ?? null
}
}
@@ -658,6 +666,11 @@ export function createMiniAppUpdateSettingsHandler(options: {
utilitiesDueDay: payload.utilitiesDueDay,
utilitiesReminderDay: payload.utilitiesReminderDay,
timezone: payload.timezone,
...(payload.rentPaymentDestinations !== undefined
? {
rentPaymentDestinations: payload.rentPaymentDestinations
}
: {}),
...(payload.assistantContext !== undefined
? {
assistantContext: payload.assistantContext

6
apps/bot/src/miniapp-auth.test.ts
View File

@@ -167,7 +167,8 @@ function onboardingRepository(): HouseholdConfigurationRepository {
rentWarningDay: 17,
utilitiesDueDay: 4,
utilitiesReminderDay: 3,
timezone: 'Asia/Tbilisi'
timezone: 'Asia/Tbilisi',
rentPaymentDestinations: null
}),
updateHouseholdBillingSettings: async (input) => ({
householdId: input.householdId,
@@ -178,7 +179,8 @@ function onboardingRepository(): HouseholdConfigurationRepository {
rentWarningDay: input.rentWarningDay ?? 17,
utilitiesDueDay: input.utilitiesDueDay ?? 4,
utilitiesReminderDay: input.utilitiesReminderDay ?? 3,
timezone: input.timezone ?? 'Asia/Tbilisi'
timezone: input.timezone ?? 'Asia/Tbilisi',
rentPaymentDestinations: input.rentPaymentDestinations ?? null
}),
listHouseholdUtilityCategories: async () => [],
upsertHouseholdUtilityCategory: async (input) => ({

6
apps/bot/src/miniapp-billing.test.ts
View File

@@ -90,7 +90,8 @@ function onboardingRepository(): HouseholdConfigurationRepository {
rentWarningDay: 17,
utilitiesDueDay: 4,
utilitiesReminderDay: 3,
timezone: 'Asia/Tbilisi'
timezone: 'Asia/Tbilisi',
rentPaymentDestinations: null
}),
updateHouseholdBillingSettings: async (input) => ({
householdId: input.householdId,
@@ -101,7 +102,8 @@ function onboardingRepository(): HouseholdConfigurationRepository {
rentWarningDay: input.rentWarningDay ?? 17,
utilitiesDueDay: input.utilitiesDueDay ?? 4,
utilitiesReminderDay: input.utilitiesReminderDay ?? 3,
timezone: input.timezone ?? 'Asia/Tbilisi'
timezone: input.timezone ?? 'Asia/Tbilisi',
rentPaymentDestinations: input.rentPaymentDestinations ?? null
}),
listHouseholdUtilityCategories: async () => [],
upsertHouseholdUtilityCategory: async (input) => ({

229
apps/bot/src/miniapp-billing.ts
View File

@@ -1,6 +1,7 @@
import type { FinanceCommandService, HouseholdOnboardingService } from '@household/application'
import { BillingPeriod } from '@household/domain'
import type { Logger } from '@household/observability'
import type { HouseholdConfigurationRepository } from '@household/ports'
import type { MiniAppSessionResult } from './miniapp-auth'
import {
@@ -70,6 +71,39 @@ async function authenticateAdminSession(
}
}
async function authenticateMemberSession(
request: Request,
sessionService: ReturnType<typeof createMiniAppSessionService>,
origin: string | undefined
): Promise<
| Response
| {
member: NonNullable<MiniAppSessionResult['member']>
}
> {
const payload = await readMiniAppRequestPayload(request)
if (!payload.initData) {
return miniAppJsonResponse({ ok: false, error: 'Missing initData' }, 400, origin)
}
const session = await sessionService.authenticate(payload)
if (!session) {
return miniAppJsonResponse({ ok: false, error: 'Invalid Telegram init data' }, 401, origin)
}
if (!session.authorized || !session.member || session.member.status !== 'active') {
return miniAppJsonResponse(
{ ok: false, error: 'Access limited to active household members' },
403,
origin
)
}
return {
member: session.member
}
}
async function parseJsonBody<T>(request: Request): Promise<T> {
const text = await request.clone().text()
if (text.trim().length === 0) {
@@ -789,6 +823,201 @@ export function createMiniAppAddUtilityBillHandler(options: {
}
}
export function createMiniAppSubmitUtilityBillHandler(options: {
allowedOrigins: readonly string[]
botToken: string
financeServiceForHousehold: (householdId: string) => FinanceCommandService
onboardingService: HouseholdOnboardingService
logger?: Logger
}): {
handler: (request: Request) => Promise<Response>
} {
const sessionService = createMiniAppSessionService({
botToken: options.botToken,
onboardingService: options.onboardingService
})
return {
handler: async (request) => {
const origin = allowedMiniAppOrigin(request, options.allowedOrigins)
if (request.method === 'OPTIONS') {
return miniAppJsonResponse({ ok: true }, 204, origin)
}
if (request.method !== 'POST') {
return miniAppJsonResponse({ ok: false, error: 'Method Not Allowed' }, 405, origin)
}
try {
const auth = await authenticateMemberSession(
request.clone() as Request,
sessionService,
origin
)
if (auth instanceof Response) {
return auth
}
const payload = await readUtilityBillPayload(request)
const service = options.financeServiceForHousehold(auth.member.householdId)
const result = await service.addUtilityBill(
payload.billName,
payload.amountMajor,
auth.member.id,
payload.currency
)
if (!result) {
return miniAppJsonResponse(
{ ok: false, error: 'No billing cycle available' },
404,
origin
)
}
return miniAppJsonResponse(
{
ok: true,
authorized: true
},
200,
origin
)
} catch (error) {
return miniAppErrorResponse(error, origin, options.logger)
}
}
}
}
export function createMiniAppSubmitPaymentHandler(options: {
allowedOrigins: readonly string[]
botToken: string
financeServiceForHousehold: (householdId: string) => FinanceCommandService
onboardingService: HouseholdOnboardingService
householdConfigurationRepository: HouseholdConfigurationRepository
logger?: Logger
}): {
handler: (request: Request) => Promise<Response>
} {
const sessionService = createMiniAppSessionService({
botToken: options.botToken,
onboardingService: options.onboardingService
})
async function notifyPaymentRecorded(input: {
householdId: string
memberName: string
kind: 'rent' | 'utilities'
amountMajor: string
currency: string
period: string
}) {
const [chat, topic] = await Promise.all([
options.householdConfigurationRepository.getHouseholdChatByHouseholdId(input.householdId),
options.householdConfigurationRepository.getHouseholdTopicBinding(
input.householdId,
'reminders'
)
])
if (!chat || !topic) {
return
}
const threadId = Number.parseInt(topic.telegramThreadId, 10)
if (!Number.isFinite(threadId)) {
return
}
const response = await fetch(`https://api.telegram.org/bot${options.botToken}/sendMessage`, {
method: 'POST',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
chat_id: chat.telegramChatId,
message_thread_id: threadId,
text: `${input.memberName} recorded a ${input.kind} payment: ${input.amountMajor} ${input.currency} (${input.period})`
})
})
if (!response.ok && options.logger) {
options.logger.warn(
{
event: 'miniapp.payment_notification_failed',
householdId: input.householdId,
status: response.status
},
'Failed to notify payment topic'
)
}
}
return {
handler: async (request) => {
const origin = allowedMiniAppOrigin(request, options.allowedOrigins)
if (request.method === 'OPTIONS') {
return miniAppJsonResponse({ ok: true }, 204, origin)
}
if (request.method !== 'POST') {
return miniAppJsonResponse({ ok: false, error: 'Method Not Allowed' }, 405, origin)
}
try {
const auth = await authenticateMemberSession(
request.clone() as Request,
sessionService,
origin
)
if (auth instanceof Response) {
return auth
}
const payload = await readPaymentMutationPayload(request)
if (!payload.kind || !payload.amountMajor) {
return miniAppJsonResponse({ ok: false, error: 'Missing payment fields' }, 400, origin)
}
const service = options.financeServiceForHousehold(auth.member.householdId)
const payment = await service.addPayment(
auth.member.id,
payload.kind,
payload.amountMajor,
payload.currency
)
if (!payment) {
return miniAppJsonResponse({ ok: false, error: 'Failed to record payment' }, 500, origin)
}
await notifyPaymentRecorded({
householdId: auth.member.householdId,
memberName: auth.member.displayName,
kind: payload.kind,
amountMajor: payment.amount.toMajorString(),
currency: payment.currency,
period: payment.period
})
return miniAppJsonResponse(
{
ok: true,
authorized: true
},
200,
origin
)
} catch (error) {
return miniAppErrorResponse(error, origin, options.logger)
}
}
}
}
export function createMiniAppUpdateUtilityBillHandler(options: {
allowedOrigins: readonly string[]
botToken: string

6
apps/bot/src/miniapp-dashboard.test.ts
View File

@@ -232,7 +232,8 @@ function onboardingRepository(): HouseholdConfigurationRepository {
rentWarningDay: 17,
utilitiesDueDay: 4,
utilitiesReminderDay: 3,
timezone: 'Asia/Tbilisi'
timezone: 'Asia/Tbilisi',
rentPaymentDestinations: null
}),
updateHouseholdBillingSettings: async (input) => ({
householdId: input.householdId,
@@ -243,7 +244,8 @@ function onboardingRepository(): HouseholdConfigurationRepository {
rentWarningDay: input.rentWarningDay ?? 17,
utilitiesDueDay: input.utilitiesDueDay ?? 4,
utilitiesReminderDay: input.utilitiesReminderDay ?? 3,
timezone: input.timezone ?? 'Asia/Tbilisi'
timezone: input.timezone ?? 'Asia/Tbilisi',
rentPaymentDestinations: input.rentPaymentDestinations ?? null
}),
listHouseholdUtilityCategories: async () => [],
upsertHouseholdUtilityCategory: async (input) => ({

3
apps/bot/src/miniapp-dashboard.ts
View File

@@ -89,9 +89,12 @@ export function createMiniAppDashboardHandler(options: {
period: dashboard.period,
currency: dashboard.currency,
timezone: dashboard.timezone,
rentWarningDay: dashboard.rentWarningDay,
rentDueDay: dashboard.rentDueDay,
utilitiesReminderDay: dashboard.utilitiesReminderDay,
utilitiesDueDay: dashboard.utilitiesDueDay,
paymentBalanceAdjustmentPolicy: dashboard.paymentBalanceAdjustmentPolicy,
rentPaymentDestinations: dashboard.rentPaymentDestinations,
totalDueMajor: dashboard.totalDue.toMajorString(),
totalPaidMajor: dashboard.totalPaid.toMajorString(),
totalRemainingMajor: dashboard.totalRemaining.toMajorString(),

6
apps/bot/src/miniapp-locale.test.ts
View File

@@ -143,7 +143,8 @@ function repository(): HouseholdConfigurationRepository {
rentWarningDay: 17,
utilitiesDueDay: 4,
utilitiesReminderDay: 3,
timezone: 'Asia/Tbilisi'
timezone: 'Asia/Tbilisi',
rentPaymentDestinations: null
}),
updateHouseholdBillingSettings: async (input) => ({
householdId: input.householdId,
@@ -154,7 +155,8 @@ function repository(): HouseholdConfigurationRepository {
rentWarningDay: input.rentWarningDay ?? 17,
utilitiesDueDay: input.utilitiesDueDay ?? 4,
utilitiesReminderDay: input.utilitiesReminderDay ?? 3,
timezone: input.timezone ?? 'Asia/Tbilisi'
timezone: input.timezone ?? 'Asia/Tbilisi',
rentPaymentDestinations: input.rentPaymentDestinations ?? null
}),
listHouseholdUtilityCategories: async () => [],
upsertHouseholdUtilityCategory: async (input) => ({

3
apps/bot/src/payment-topic-ingestion.test.ts
View File

@@ -174,9 +174,12 @@ function createFinanceService(): FinanceCommandService {
period: '2026-03',
currency: 'GEL',
timezone: 'Asia/Tbilisi',
rentWarningDay: 17,
rentDueDay: 20,
utilitiesReminderDay: 3,
utilitiesDueDay: 4,
paymentBalanceAdjustmentPolicy: 'utilities',
rentPaymentDestinations: null,
totalDue: Money.fromMajor('1000', 'GEL'),
totalPaid: Money.zero('GEL'),
totalRemaining: Money.fromMajor('1000', 'GEL'),

3
apps/bot/src/purchase-topic-ingestion.test.ts
View File

@@ -2021,7 +2021,8 @@ Confirm or cancel below.`,
utilitiesDueDay: 12,
utilitiesReminderDay: 10,
timezone: 'Asia/Tbilisi',
settlementCurrency: 'GEL' as const
settlementCurrency: 'GEL' as const,
rentPaymentDestinations: null
}),
getHouseholdChatByHouseholdId: async () => ({
householdId: config.householdId,

23
apps/bot/src/server.ts
View File

@@ -122,6 +122,12 @@ export interface BotWebhookServerOptions {
handler: (request: Request) => Promise<Response>
}
| undefined
miniAppSubmitUtilityBill?:
| {
path?: string
handler: (request: Request) => Promise<Response>
}
| undefined
miniAppUpdateUtilityBill?:
| {
path?: string
@@ -158,6 +164,12 @@ export interface BotWebhookServerOptions {
handler: (request: Request) => Promise<Response>
}
| undefined
miniAppSubmitPayment?:
| {
path?: string
handler: (request: Request) => Promise<Response>
}
| undefined
miniAppUpdatePayment?:
| {
path?: string
@@ -241,6 +253,8 @@ export function createBotWebhookServer(options: BotWebhookServerOptions): {
const miniAppRentUpdatePath = options.miniAppRentUpdate?.path ?? '/api/miniapp/admin/rent/update'
const miniAppAddUtilityBillPath =
options.miniAppAddUtilityBill?.path ?? '/api/miniapp/admin/utility-bills/add'
const miniAppSubmitUtilityBillPath =
options.miniAppSubmitUtilityBill?.path ?? '/api/miniapp/utility-bills/add'
const miniAppUpdateUtilityBillPath =
options.miniAppUpdateUtilityBill?.path ?? '/api/miniapp/admin/utility-bills/update'
const miniAppDeleteUtilityBillPath =
@@ -252,6 +266,7 @@ export function createBotWebhookServer(options: BotWebhookServerOptions): {
const miniAppDeletePurchasePath =
options.miniAppDeletePurchase?.path ?? '/api/miniapp/admin/purchases/delete'
const miniAppAddPaymentPath = options.miniAppAddPayment?.path ?? '/api/miniapp/admin/payments/add'
const miniAppSubmitPaymentPath = options.miniAppSubmitPayment?.path ?? '/api/miniapp/payments/add'
const miniAppUpdatePaymentPath =
options.miniAppUpdatePayment?.path ?? '/api/miniapp/admin/payments/update'
const miniAppDeletePaymentPath =
@@ -362,6 +377,10 @@ export function createBotWebhookServer(options: BotWebhookServerOptions): {
return await options.miniAppAddUtilityBill.handler(request)
}
if (options.miniAppSubmitUtilityBill && url.pathname === miniAppSubmitUtilityBillPath) {
return await options.miniAppSubmitUtilityBill.handler(request)
}
if (options.miniAppUpdateUtilityBill && url.pathname === miniAppUpdateUtilityBillPath) {
return await options.miniAppUpdateUtilityBill.handler(request)
}
@@ -386,6 +405,10 @@ export function createBotWebhookServer(options: BotWebhookServerOptions): {
return await options.miniAppAddPayment.handler(request)
}
if (options.miniAppSubmitPayment && url.pathname === miniAppSubmitPaymentPath) {
return await options.miniAppSubmitPayment.handler(request)
}
if (options.miniAppUpdatePayment && url.pathname === miniAppUpdatePaymentPath) {
return await options.miniAppUpdatePayment.handler(request)
}

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

@@ -9,11 +9,22 @@ import { NavigationTabs } from './navigation-tabs'
import { Badge } from '../ui/badge'
import { Button, IconButton } from '../ui/button'
import { Modal } from '../ui/dialog'
import { Field } from '../ui/field'
import { Input } from '../ui/input'
export function AppShell(props: ParentProps) {
const { readySession } = useSession()
const { copy, locale, setLocale } = useI18n()
const { effectiveIsAdmin, testingRolePreview, setTestingRolePreview } = useDashboard()
const {
dashboard,
effectiveIsAdmin,
testingRolePreview,
setTestingRolePreview,
testingPeriodOverride,
setTestingPeriodOverride,
testingTodayOverride,
setTestingTodayOverride
} = useDashboard()
const navigate = useNavigate()
const [testingSurfaceOpen, setTestingSurfaceOpen] = createSignal(false)
@@ -157,6 +168,43 @@ export function AppShell(props: ParentProps) {
{copy().testingPreviewResidentAction ?? ''}
</Button>
</div>
<article class="testing-card__section">
<span>{copy().testingPeriodCurrentLabel ?? ''}</span>
<strong>{dashboard()?.period ?? '—'}</strong>
</article>
<div class="testing-card__actions" style={{ 'flex-direction': 'column', gap: '12px' }}>
<Field label={copy().testingPeriodOverrideLabel ?? ''} wide>
<Input
placeholder={copy().testingPeriodOverridePlaceholder ?? ''}
value={testingPeriodOverride() ?? ''}
onInput={(e) => {
const next = e.currentTarget.value.trim()
setTestingPeriodOverride(next.length > 0 ? next : null)
}}
/>
</Field>
<Field label={copy().testingTodayOverrideLabel ?? ''} wide>
<Input
placeholder={copy().testingTodayOverridePlaceholder ?? ''}
value={testingTodayOverride() ?? ''}
onInput={(e) => {
const next = e.currentTarget.value.trim()
setTestingTodayOverride(next.length > 0 ? next : null)
}}
/>
</Field>
<div class="modal-action-row">
<Button
variant="ghost"
onClick={() => {
setTestingPeriodOverride(null)
setTestingTodayOverride(null)
}}
>
{copy().testingClearOverridesAction ?? ''}
</Button>
</div>
</div>
</div>
</Modal>
</main>

50
apps/miniapp/src/components/ui/toast.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { Show, createEffect, onCleanup } from 'solid-js'
import { cn } from '../../lib/cn'
export interface ToastOptions {
message: string
type?: 'success' | 'info' | 'error'
duration?: number
}
export interface ToastState {
visible: boolean
message: string
type: 'success' | 'info' | 'error'
}
const toastVariants = {
success: 'toast--success',
info: 'toast--info',
error: 'toast--error'
}
export function Toast(props: { state: ToastState; onClose: () => void }) {
let timeoutId: ReturnType<typeof setTimeout> | undefined
createEffect(() => {
if (props.state.visible) {
timeoutId = setTimeout(
() => {
props.onClose()
},
props.state.type === 'error' ? 4000 : 2000
)
}
})
onCleanup(() => {
if (timeoutId) {
clearTimeout(timeoutId)
}
})
return (
<Show when={props.state.visible}>
<div role="status" aria-live="polite" class={cn('toast', toastVariants[props.state.type])}>
<span class="toast__message">{props.state.message}</span>
</div>
</Show>
)
}

10
apps/miniapp/src/contexts/dashboard-context.tsx
View File

@@ -103,6 +103,10 @@ type DashboardContextValue = {
purchaseInvestmentChart: () => ReturnType<typeof computePurchaseInvestmentChart>
testingRolePreview: () => TestingRolePreview | null
setTestingRolePreview: (value: TestingRolePreview | null) => void
testingPeriodOverride: () => string | null
setTestingPeriodOverride: (value: string | null) => void
testingTodayOverride: () => string | null
setTestingTodayOverride: (value: string | null) => void
loadDashboardData: (initData: string, isAdmin: boolean) => Promise<void>
applyDemoState: () => void
}
@@ -246,6 +250,8 @@ export function DashboardProvider(props: ParentProps) {
const [cycleState, setCycleState] = createSignal<MiniAppAdminCycleState | null>(null)
const [pendingMembers, setPendingMembers] = createSignal<readonly MiniAppPendingMember[]>([])
const [testingRolePreview, setTestingRolePreview] = createSignal<TestingRolePreview | null>(null)
const [testingPeriodOverride, setTestingPeriodOverride] = createSignal<string | null>(null)
const [testingTodayOverride, setTestingTodayOverride] = createSignal<string | null>(null)
const effectiveIsAdmin = createMemo(() => {
const current = readySession()
@@ -356,6 +362,10 @@ export function DashboardProvider(props: ParentProps) {
purchaseInvestmentChart,
testingRolePreview,
setTestingRolePreview,
testingPeriodOverride,
setTestingPeriodOverride,
testingTodayOverride,
setTestingTodayOverride,
loadDashboardData,
applyDemoState
}}

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

@@ -27,9 +27,21 @@ export const demoDashboard: MiniAppDashboard = {
period: '2026-03',
currency: 'GEL',
timezone: 'Asia/Tbilisi',
rentWarningDay: 17,
rentDueDay: 20,
utilitiesReminderDay: 3,
utilitiesDueDay: 4,
paymentBalanceAdjustmentPolicy: 'utilities',
rentPaymentDestinations: [
{
label: 'TBC card',
recipientName: 'Landlord',
bankName: 'TBC Bank',
account: '1234 5678 9012 3456',
note: null,
link: null
}
],
totalDueMajor: '2410.00',
totalPaidMajor: '650.00',
totalRemainingMajor: '1760.00',
@@ -209,7 +221,8 @@ export const demoAdminSettings: MiniAppAdminSettingsPayload = {
rentWarningDay: 17,
utilitiesDueDay: 4,
utilitiesReminderDay: 3,
timezone: 'Asia/Tbilisi'
timezone: 'Asia/Tbilisi',
rentPaymentDestinations: demoDashboard.rentPaymentDestinations
},
assistantConfig: {
householdId: 'demo-household',

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

@@ -64,6 +64,22 @@ export const dictionary = {
payNowBody: '',
homeDueTitle: 'Due',
homeSettledTitle: 'Settled',
homeUtilitiesTitle: 'Utilities payment',
homeRentTitle: 'Rent payment',
homeNoPaymentTitle: 'No payment period',
homeUtilitiesUpcomingLabel: 'Utilities starts {date}',
homeRentUpcomingLabel: 'Rent starts {date}',
homeFillUtilitiesTitle: 'Fill utilities',
homeFillUtilitiesBody:
'No utility bills are recorded for this cycle yet. Add at least one bill to calculate utilities.',
homeFillUtilitiesSubmitAction: 'Save utility bill',
homeFillUtilitiesSubmitting: 'Saving…',
homeFillUtilitiesOpenLedgerAction: 'Open ledger',
homeUtilitiesBillsTitle: 'Utility bills',
homePurchasesTitle: 'Purchases',
homePurchasesOffsetLabel: 'Your purchases balance',
homePurchasesTotalLabel: 'Household purchases ({count})',
homeMembersCountLabel: 'Members',
whyAction: 'Why?',
currentCycleLabel: 'Current cycle',
cycleTotalLabel: 'Cycle total',
@@ -137,6 +153,12 @@ export const dictionary = {
testingPreviewResidentAction: 'Preview resident',
testingCurrentRoleLabel: 'Real access',
testingPreviewRoleLabel: 'Previewing',
testingPeriodCurrentLabel: 'Dashboard period',
testingPeriodOverrideLabel: 'Period override',
testingPeriodOverridePlaceholder: 'YYYY-MM',
testingTodayOverrideLabel: 'Today override',
testingTodayOverridePlaceholder: 'YYYY-MM-DD',
testingClearOverridesAction: 'Clear overrides',
purchaseReviewTitle: 'Purchases',
purchaseReviewBody: 'Edit or remove purchases if the bot recorded the wrong item.',
purchaseSplitTitle: 'Split',
@@ -151,6 +173,15 @@ export const dictionary = {
paymentsAdminTitle: 'Payments',
paymentsAdminBody: 'Add, fix, or remove payment records for the current cycle.',
paymentsAddAction: 'Add payment',
copiedToast: 'Copied!',
quickPaymentTitle: 'Record payment',
quickPaymentBody: 'Quickly record a {type} payment for the current cycle.',
quickPaymentAmountLabel: 'Amount',
quickPaymentCurrencyLabel: 'Currency',
quickPaymentSubmitAction: 'Save payment',
quickPaymentSubmitting: 'Saving…',
quickPaymentSuccess: 'Payment recorded successfully',
quickPaymentFailed: 'Failed to record payment',
addingPayment: 'Adding payment…',
paymentCreateBody: 'Create a payment record in a focused editor instead of a long inline form.',
paymentKind: 'Payment kind',
@@ -220,6 +251,7 @@ export const dictionary = {
currencyLabel: 'Currency',
rentAmount: 'Rent amount',
defaultRentAmount: 'Default rent',
rentCurrencyLabel: 'Rent currency',
defaultRentHint:
'New current cycles start from this rent unless you override a specific month.',
currentCycleRentLabel: 'Current cycle rent',
@@ -235,6 +267,16 @@ export const dictionary = {
timezone: 'Timezone',
timezoneHint: 'Use an IANA timezone like Asia/Tbilisi.',
timezoneInvalidHint: 'Pick a valid IANA timezone such as Asia/Tbilisi.',
rentPaymentDestinationsTitle: 'Rent payment destinations',
rentPaymentDestinationsEmpty: 'No rent payment destinations saved yet.',
rentPaymentDestinationAddAction: 'Add destination',
rentPaymentDestinationRemoveAction: 'Remove destination',
rentPaymentDestinationLabel: 'Label',
rentPaymentDestinationRecipient: 'Recipient name',
rentPaymentDestinationBank: 'Bank name',
rentPaymentDestinationAccount: 'Account / card / IBAN',
rentPaymentDestinationLink: 'Payment link',
rentPaymentDestinationNote: 'Note',
manageSettingsAction: 'Manage settings',
billingSettingsEditorBody:
'Household defaults live here. New current cycles start from these values.',
@@ -367,6 +409,22 @@ export const dictionary = {
payNowBody: '',
homeDueTitle: 'К оплате',
homeSettledTitle: 'Закрыто',
homeUtilitiesTitle: 'Оплата коммуналки',
homeRentTitle: 'Оплата аренды',
homeNoPaymentTitle: 'Период без оплаты',
homeUtilitiesUpcomingLabel: 'Коммуналка с {date}',
homeRentUpcomingLabel: 'Аренда с {date}',
homeFillUtilitiesTitle: 'Внести коммуналку',
homeFillUtilitiesBody:
'Для этого цикла коммунальные счета ещё не внесены. Добавь хотя бы один счёт, чтобы рассчитать коммуналку.',
homeFillUtilitiesSubmitAction: 'Сохранить счёт',
homeFillUtilitiesSubmitting: 'Сохраняем…',
homeFillUtilitiesOpenLedgerAction: 'Открыть леджер',
homeUtilitiesBillsTitle: 'Коммунальные счета',
homePurchasesTitle: 'Покупки',
homePurchasesOffsetLabel: 'Ваш баланс покупок',
homePurchasesTotalLabel: 'Покупок в доме ({count})',
homeMembersCountLabel: 'Жильцов',
whyAction: 'Почему?',
currentCycleLabel: 'Текущий цикл',
cycleTotalLabel: 'Всего за цикл',
@@ -440,6 +498,12 @@ export const dictionary = {
testingPreviewResidentAction: 'Вид жителя',
testingCurrentRoleLabel: 'Реальный доступ',
testingPreviewRoleLabel: 'Сейчас показан',
testingPeriodCurrentLabel: 'Период (из API)',
testingPeriodOverrideLabel: 'Переопределить период',
testingPeriodOverridePlaceholder: 'YYYY-MM',
testingTodayOverrideLabel: 'Переопределить сегодня',
testingTodayOverridePlaceholder: 'YYYY-MM-DD',
testingClearOverridesAction: 'Сбросить переопределения',
purchaseReviewTitle: 'Покупки',
purchaseReviewBody:
'Здесь можно исправить или удалить покупку, если бот распознал её неправильно.',
@@ -456,6 +520,15 @@ export const dictionary = {
paymentsAdminTitle: 'Оплаты',
paymentsAdminBody: 'Добавляй, исправляй или удаляй оплаты за текущий цикл.',
paymentsAddAction: 'Добавить оплату',
copiedToast: 'Скопировано!',
quickPaymentTitle: 'Записать оплату',
quickPaymentBody: 'Быстро запиши оплату {type} за текущий цикл.',
quickPaymentAmountLabel: 'Сумма',
quickPaymentCurrencyLabel: 'Валюта',
quickPaymentSubmitAction: 'Сохранить оплату',
quickPaymentSubmitting: 'Сохраняем…',
quickPaymentSuccess: 'Оплата успешно записана',
quickPaymentFailed: 'Не удалось записать оплату',
addingPayment: 'Добавляем оплату…',
paymentCreateBody: 'Создай оплату в отдельном окне вместо длинной встроенной формы.',
paymentKind: 'Тип оплаты',
@@ -524,6 +597,7 @@ export const dictionary = {
currencyLabel: 'Валюта',
rentAmount: 'Сумма аренды',
defaultRentAmount: 'Аренда по умолчанию',
rentCurrencyLabel: 'Валюта аренды',
defaultRentHint:
'Новые текущие циклы стартуют с этой суммой, если для конкретного месяца нет переопределения.',
currentCycleRentLabel: 'Аренда текущего цикла',
@@ -539,6 +613,16 @@ export const dictionary = {
timezone: 'Часовой пояс',
timezoneHint: 'Используй IANA-таймзону, например Asia/Tbilisi.',
timezoneInvalidHint: 'Выбери корректную IANA-таймзону, например Asia/Tbilisi.',
rentPaymentDestinationsTitle: 'Реквизиты для оплаты аренды',
rentPaymentDestinationsEmpty: 'Реквизиты для оплаты аренды ещё не добавлены.',
rentPaymentDestinationAddAction: 'Добавить реквизиты',
rentPaymentDestinationRemoveAction: 'Удалить',
rentPaymentDestinationLabel: 'Название',
rentPaymentDestinationRecipient: 'Получатель',
rentPaymentDestinationBank: 'Банк',
rentPaymentDestinationAccount: 'Счёт / карта / IBAN',
rentPaymentDestinationLink: 'Ссылка на оплату',
rentPaymentDestinationNote: 'Комментарий',
manageSettingsAction: 'Управлять настройками',
billingSettingsEditorBody:
'Здесь живут значения по умолчанию для дома. Новые текущие циклы стартуют отсюда.',

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

@@ -1033,6 +1033,46 @@ a {
font-weight: 600;
}
.copyable-detail {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 8px;
border-radius: 6px;
border: 0;
background: transparent;
color: inherit;
font: inherit;
cursor: pointer;
transition: background-color 150ms ease;
}
.copyable-detail:hover {
background: rgba(0, 0, 0, 0.04);
}
.copyable-detail svg {
opacity: 0.65;
transition:
opacity 120ms ease,
transform 120ms ease,
color 120ms ease;
}
.copyable-detail:hover svg {
opacity: 0.9;
}
.copyable-detail.is-copied svg {
opacity: 1;
color: var(--status-credit);
transform: scale(1.1);
}
.copyable-detail.is-copied {
background: rgba(34, 197, 94, 0.12);
}
.balance-card__remaining {
padding-top: var(--spacing-sm);
margin-top: var(--spacing-sm);
@@ -1696,3 +1736,55 @@ a {
.balance-item--accent {
border-color: var(--accent-border);
}
/* ── Toast Notifications ─────────────────────── */
.toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(0);
background: var(--text-primary);
color: var(--bg-root);
padding: 12px 20px;
border-radius: 999px;
font-size: var(--text-sm);
font-weight: 500;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
z-index: var(--z-toast);
animation: toast-slide-up 200ms ease-out;
max-width: calc(100vw - 48px);
text-align: center;
}
.toast--success {
background: var(--status-credit);
color: #fff;
}
.toast--info {
background: var(--text-primary);
color: var(--bg-root);
}
.toast--error {
background: var(--status-danger);
color: #fff;
}
.toast__message {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@keyframes toast-slide-up {
from {
opacity: 0;
transform: translateX(-50%) translateY(16px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}

51
apps/miniapp/src/lib/dates.ts
View File

@@ -1,5 +1,7 @@
import type { Locale } from '../i18n'
export type CalendarDateParts = { year: number; month: number; day: number }
function localeTag(locale: Locale): string {
return locale === 'ru' ? 'ru-RU' : 'en-US'
}
@@ -51,7 +53,40 @@ function daysInMonth(year: number, month: number): number {
return new Date(Date.UTC(year, month, 0)).getUTCDate()
}
function formatTodayParts(timezone: string): { year: number; month: number; day: number } | null {
export function parseCalendarDate(value: string): CalendarDateParts | null {
const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
if (!match) return null
const year = Number.parseInt(match[1] ?? '', 10)
const month = Number.parseInt(match[2] ?? '', 10)
const day = Number.parseInt(match[3] ?? '', 10)
if (
!Number.isInteger(year) ||
!Number.isInteger(month) ||
!Number.isInteger(day) ||
month < 1 ||
month > 12 ||
day < 1 ||
day > 31
) {
return null
}
return { year, month, day }
}
export function nextCyclePeriod(period: string): string | null {
const parsed = parsePeriod(period)
if (!parsed) return null
const month = parsed.month === 12 ? 1 : parsed.month + 1
const year = parsed.month === 12 ? parsed.year + 1 : parsed.year
const monthLabel = String(month).padStart(2, '0')
return `${year}-${monthLabel}`
}
function formatTodayParts(timezone: string): CalendarDateParts | null {
try {
const parts = new Intl.DateTimeFormat('en-CA', {
timeZone: timezone,
@@ -134,10 +169,11 @@ export function formatPeriodDay(period: string, day: number, locale: Locale): st
export function compareTodayToPeriodDay(
period: string,
day: number,
timezone: string
timezone: string,
todayOverride?: CalendarDateParts | null
): -1 | 0 | 1 | null {
const parsed = parsePeriod(period)
const today = formatTodayParts(timezone)
const today = todayOverride ?? formatTodayParts(timezone)
if (!parsed || !today) {
return null
}
@@ -157,9 +193,14 @@ export function compareTodayToPeriodDay(
return 0
}
export function daysUntilPeriodDay(period: string, day: number, timezone: string): number | null {
export function daysUntilPeriodDay(
period: string,
day: number,
timezone: string,
todayOverride?: CalendarDateParts | null
): number | null {
const parsed = parsePeriod(period)
const today = formatTodayParts(timezone)
const today = todayOverride ?? formatTodayParts(timezone)
if (!parsed || !today) {
return null
}

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

@@ -69,6 +69,16 @@ export interface MiniAppBillingSettings {
utilitiesDueDay: number
utilitiesReminderDay: number
timezone: string
rentPaymentDestinations: readonly MiniAppRentPaymentDestination[] | null
}
export interface MiniAppRentPaymentDestination {
label: string
recipientName: string | null
bankName: string | null
account: string
note: string | null
link: string | null
}
export interface MiniAppAssistantConfig {
@@ -96,9 +106,12 @@ export interface MiniAppDashboard {
period: string
currency: 'USD' | 'GEL'
timezone: string
rentWarningDay: number
rentDueDay: number
utilitiesReminderDay: number
utilitiesDueDay: number
paymentBalanceAdjustmentPolicy: 'utilities' | 'rent' | 'separate'
rentPaymentDestinations: readonly MiniAppRentPaymentDestination[] | null
totalDueMajor: string
totalPaidMajor: string
totalRemainingMajor: string
@@ -466,6 +479,7 @@ export async function updateMiniAppBillingSettings(
utilitiesDueDay: number
utilitiesReminderDay: number
timezone: string
rentPaymentDestinations?: readonly MiniAppRentPaymentDestination[] | null
assistantContext?: string
assistantTone?: string
}
@@ -883,6 +897,36 @@ export async function addMiniAppUtilityBill(
return payload.cycleState
}
export async function submitMiniAppUtilityBill(
initData: string,
input: {
billName: string
amountMajor: string
currency: 'USD' | 'GEL'
}
): Promise<void> {
const response = await fetch(`${apiBaseUrl()}/api/miniapp/utility-bills/add`, {
method: 'POST',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
initData,
...input
})
})
const payload = (await response.json()) as {
ok: boolean
authorized?: boolean
error?: string
}
if (!response.ok || !payload.authorized) {
throw new Error(payload.error ?? 'Failed to submit utility bill')
}
}
export async function updateMiniAppUtilityBill(
initData: string,
input: {

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

@@ -1,19 +1,93 @@
import { Show, For, createSignal } from 'solid-js'
import { Clock, ChevronDown, ChevronUp } from 'lucide-solid'
import { Show, For, createMemo, createSignal } from 'solid-js'
import { Clock, ChevronDown, ChevronUp, Copy, Check, CreditCard } from 'lucide-solid'
import { useNavigate } from '@solidjs/router'
import { useSession } from '../contexts/session-context'
import { useI18n } from '../contexts/i18n-context'
import { useDashboard } from '../contexts/dashboard-context'
import { Card } from '../components/ui/card'
import { Badge } from '../components/ui/badge'
import { Button } from '../components/ui/button'
import { Field } from '../components/ui/field'
import { Input } from '../components/ui/input'
import { Modal } from '../components/ui/dialog'
import { Toast } from '../components/ui/toast'
import { memberRemainingClass, ledgerPrimaryAmount } from '../lib/ledger-helpers'
import { majorStringToMinor, minorToMajorString } from '../lib/money'
import {
compareTodayToPeriodDay,
daysUntilPeriodDay,
formatPeriodDay,
nextCyclePeriod,
parseCalendarDate
} from '../lib/dates'
import { submitMiniAppUtilityBill, addMiniAppPayment } from '../miniapp-api'
export default function HomeRoute() {
const { readySession } = useSession()
const { copy } = useI18n()
const { dashboard, currentMemberLine } = useDashboard()
const navigate = useNavigate()
const { readySession, initData, refreshHouseholdData } = useSession()
const { copy, locale } = useI18n()
const {
dashboard,
currentMemberLine,
utilityLedger,
utilityTotalMajor,
purchaseLedger,
purchaseTotalMajor,
testingPeriodOverride,
testingTodayOverride
} = useDashboard()
const [showAllActivity, setShowAllActivity] = createSignal(false)
const [utilityDraft, setUtilityDraft] = createSignal({
billName: '',
amountMajor: '',
currency: (dashboard()?.currency as 'USD' | 'GEL') ?? 'GEL'
})
const [submittingUtilities, setSubmittingUtilities] = createSignal(false)
const [copiedValue, setCopiedValue] = createSignal<string | null>(null)
const [quickPaymentOpen, setQuickPaymentOpen] = createSignal(false)
const [quickPaymentType, setQuickPaymentType] = createSignal<'rent' | 'utilities'>('rent')
const [quickPaymentAmount, setQuickPaymentAmount] = createSignal('')
const [submittingPayment, setSubmittingPayment] = createSignal(false)
const [toastState, setToastState] = createSignal<{
visible: boolean
message: string
type: 'success' | 'info' | 'error'
}>({ visible: false, message: '', type: 'info' })
async function copyText(value: string): Promise<boolean> {
try {
await navigator.clipboard.writeText(value)
return true
} catch {
try {
const element = document.createElement('textarea')
element.value = value
element.setAttribute('readonly', 'true')
element.style.position = 'absolute'
element.style.left = '-9999px'
document.body.appendChild(element)
element.select()
document.execCommand('copy')
document.body.removeChild(element)
return true
} catch {}
}
return false
}
async function handleCopy(value: string) {
if (await copyText(value)) {
setCopiedValue(value)
setToastState({ visible: true, message: copy().copiedToast, type: 'success' })
setTimeout(() => {
if (copiedValue() === value) {
setCopiedValue(null)
}
}, 1400)
}
}
function dueStatusBadge() {
const data = dashboard()
@@ -24,6 +98,168 @@ export default function HomeRoute() {
return { label: copy().homeDueTitle, variant: 'danger' as const }
}
function paymentWindowStatus(input: {
period: string
timezone: string
reminderDay: number
dueDay: number
todayOverride?: ReturnType<typeof parseCalendarDate>
}): { active: boolean; daysUntilDue: number | null } {
if (!Number.isInteger(input.reminderDay) || !Number.isInteger(input.dueDay)) {
return { active: false, daysUntilDue: null }
}
const start = compareTodayToPeriodDay(
input.period,
input.reminderDay,
input.timezone,
input.todayOverride
)
const end = compareTodayToPeriodDay(
input.period,
input.dueDay,
input.timezone,
input.todayOverride
)
if (start === null || end === null) {
return { active: false, daysUntilDue: null }
}
const reminderPassed = start !== -1
const dueNotPassed = end !== 1
const daysUntilDue = daysUntilPeriodDay(
input.period,
input.dueDay,
input.timezone,
input.todayOverride
)
return {
active: reminderPassed && dueNotPassed,
daysUntilDue
}
}
const todayOverride = createMemo(() => {
const raw = testingTodayOverride()
if (!raw) return null
return parseCalendarDate(raw)
})
const effectivePeriod = createMemo(() => {
const data = dashboard()
if (!data) return null
const override = testingPeriodOverride()
if (!override) return data.period
const match = /^(\d{4})-(\d{2})$/.exec(override)
if (!match) return data.period
const month = Number.parseInt(match[2] ?? '', 10)
if (!Number.isInteger(month) || month < 1 || month > 12) return data.period
return override
})
const homeMode = createMemo(() => {
const data = dashboard()
if (!data) return 'none' as const
const period = effectivePeriod() ?? data.period
const today = todayOverride()
const utilities = paymentWindowStatus({
period,
timezone: data.timezone,
reminderDay: data.utilitiesReminderDay,
dueDay: data.utilitiesDueDay,
todayOverride: today
})
const rent = paymentWindowStatus({
period,
timezone: data.timezone,
reminderDay: data.rentWarningDay,
dueDay: data.rentDueDay,
todayOverride: today
})
if (utilities.active && rent.active) {
const utilitiesDays = utilities.daysUntilDue ?? Number.POSITIVE_INFINITY
const rentDays = rent.daysUntilDue ?? Number.POSITIVE_INFINITY
return utilitiesDays <= rentDays ? ('utilities' as const) : ('rent' as const)
}
if (utilities.active) return 'utilities' as const
if (rent.active) return 'rent' as const
return 'none' as const
})
async function handleSubmitUtilities() {
const data = initData()
const current = dashboard()
const draft = utilityDraft()
if (!data || !current || submittingUtilities()) return
if (!draft.billName.trim() || !draft.amountMajor.trim()) return
setSubmittingUtilities(true)
try {
await submitMiniAppUtilityBill(data, {
billName: draft.billName,
amountMajor: draft.amountMajor,
currency: draft.currency
})
setUtilityDraft({
billName: '',
amountMajor: '',
currency: current.currency
})
await refreshHouseholdData(true, true)
} finally {
setSubmittingUtilities(false)
}
}
function openQuickPayment(type: 'rent' | 'utilities') {
const data = dashboard()
if (!data || !currentMemberLine()) return
const member = currentMemberLine()!
const amount = type === 'rent' ? member.rentShareMajor : member.utilityShareMajor
setQuickPaymentType(type)
setQuickPaymentAmount(amount)
setQuickPaymentOpen(true)
}
async function handleQuickPaymentSubmit() {
const data = initData()
const amount = quickPaymentAmount()
const type = quickPaymentType()
if (!data || !amount.trim() || !currentMemberLine()) return
setSubmittingPayment(true)
try {
await addMiniAppPayment(data, {
memberId: currentMemberLine()!.memberId,
kind: type,
amountMajor: amount,
currency: (dashboard()?.currency as 'USD' | 'GEL') ?? 'GEL'
})
setQuickPaymentOpen(false)
setToastState({
visible: true,
message: copy().quickPaymentSuccess,
type: 'success'
})
await refreshHouseholdData(true, true)
} catch {
setToastState({
visible: true,
message: copy().quickPaymentFailed,
type: 'error'
})
} finally {
setSubmittingPayment(false)
}
}
return (
<div class="route route--home">
{/* ── Welcome hero ────────────────────────────── */}
@@ -43,63 +279,517 @@ export default function HomeRoute() {
>
{(data) => (
<>
{/* Your balance card */}
<Show when={currentMemberLine()}>
{(member) => {
const subtotalMinor =
majorStringToMinor(member().rentShareMajor) +
majorStringToMinor(member().utilityShareMajor)
const subtotalMajor = minorToMajorString(subtotalMinor)
const policy = () => data().paymentBalanceAdjustmentPolicy
const rentBaseMinor = () => majorStringToMinor(member().rentShareMajor)
const utilitiesBaseMinor = () => majorStringToMinor(member().utilityShareMajor)
const purchaseOffsetMinor = () => majorStringToMinor(member().purchaseOffsetMajor)
const rentProposalMinor = () =>
policy() === 'rent' ? rentBaseMinor() + purchaseOffsetMinor() : rentBaseMinor()
const utilitiesProposalMinor = () =>
policy() === 'utilities'
? utilitiesBaseMinor() + purchaseOffsetMinor()
: utilitiesBaseMinor()
const mode = () => homeMode()
const currency = () => data().currency
const timezone = () => data().timezone
const period = () => effectivePeriod() ?? data().period
const today = () => todayOverride()
function upcomingDay(day: number): { dateLabel: string; daysUntil: number | null } {
const withinPeriodDays = daysUntilPeriodDay(period(), day, timezone(), today())
if (withinPeriodDays === null) {
return { dateLabel: '—', daysUntil: null }
}
if (withinPeriodDays >= 0) {
return {
dateLabel: formatPeriodDay(period(), day, locale()),
daysUntil: withinPeriodDays
}
}
const next = nextCyclePeriod(period())
if (!next) {
return { dateLabel: formatPeriodDay(period(), day, locale()), daysUntil: null }
}
return {
dateLabel: formatPeriodDay(next, day, locale()),
daysUntil: daysUntilPeriodDay(next, day, timezone(), today())
}
}
const rentDueDate = () => formatPeriodDay(period(), data().rentDueDay, locale())
const utilitiesDueDate = () =>
formatPeriodDay(period(), data().utilitiesDueDay, locale())
const rentDaysUntilDue = () =>
daysUntilPeriodDay(period(), data().rentDueDay, timezone(), today())
const utilitiesDaysUntilDue = () =>
daysUntilPeriodDay(period(), data().utilitiesDueDay, timezone(), today())
const rentUpcoming = () => upcomingDay(data().rentWarningDay)
const utilitiesUpcoming = () => upcomingDay(data().utilitiesReminderDay)
const focusBadge = () => {
const badge = dueStatusBadge()
return badge ? <Badge variant={badge.variant}>{badge.label}</Badge> : null
}
const dueBadge = (days: number | null) => {
if (days === null) return null
if (days < 0) return <Badge variant="danger">{copy().overdueLabel}</Badge>
if (days === 0) return <Badge variant="danger">{copy().dueTodayLabel}</Badge>
return (
<Badge variant="muted">
{copy().daysLeftLabel.replace('{count}', String(days))}
</Badge>
)
}
return (
<Card accent>
<div class="balance-card">
<div class="balance-card__header">
<span class="balance-card__label">{copy().yourBalanceTitle}</span>
<Show when={dueStatusBadge()}>
{(badge) => <Badge variant={badge().variant}>{badge().label}</Badge>}
</Show>
<>
<Show when={mode() === 'utilities'}>
<Card accent>
<div class="balance-card">
<div class="balance-card__header">
<span class="balance-card__label">{copy().homeUtilitiesTitle}</span>
<div style={{ display: 'flex', gap: '8px', 'align-items': 'center' }}>
{focusBadge()}
<Button
variant="primary"
size="sm"
onClick={() => openQuickPayment('utilities')}
>
<CreditCard size={14} />
{copy().quickPaymentSubmitAction}
</Button>
</div>
</div>
<div class="balance-card__amounts">
<div class="balance-card__row balance-card__row--subtotal">
<span>{copy().finalDue}</span>
<strong>
{minorToMajorString(utilitiesProposalMinor())} {currency()}
</strong>
</div>
<div class="balance-card__row">
<span>{copy().dueOnLabel.replace('{date}', utilitiesDueDate())}</span>
{dueBadge(utilitiesDaysUntilDue())}
</div>
<div class="balance-card__row">
<span>{copy().baseDue}</span>
<strong>
{member().utilityShareMajor} {currency()}
</strong>
</div>
<Show when={policy() === 'utilities'}>
<div class="balance-card__row">
<span>{copy().balanceAdjustmentLabel}</span>
<strong>
{member().purchaseOffsetMajor} {currency()}
</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>
</div>
<For each={utilityLedger()}>
{(entry) => (
<div class="balance-card__row">
<span>{entry.title}</span>
<strong>{ledgerPrimaryAmount(entry)}</strong>
</div>
)}
</For>
</Show>
</div>
</div>
</Card>
</Show>
<Show when={mode() === 'rent'}>
<Card accent>
<div class="balance-card">
<div class="balance-card__header">
<span class="balance-card__label">{copy().homeRentTitle}</span>
<div style={{ display: 'flex', gap: '8px', 'align-items': 'center' }}>
{focusBadge()}
<Button
variant="primary"
size="sm"
onClick={() => openQuickPayment('rent')}
>
<CreditCard size={14} />
{copy().quickPaymentSubmitAction}
</Button>
</div>
</div>
<div class="balance-card__amounts">
<div class="balance-card__row balance-card__row--subtotal">
<span>{copy().finalDue}</span>
<strong>
{minorToMajorString(rentProposalMinor())} {currency()}
</strong>
</div>
<div class="balance-card__row">
<span>{copy().dueOnLabel.replace('{date}', rentDueDate())}</span>
{dueBadge(rentDaysUntilDue())}
</div>
<div class="balance-card__row">
<span>{copy().baseDue}</span>
<strong>
{member().rentShareMajor} {currency()}
</strong>
</div>
<Show when={policy() === 'rent'}>
<div class="balance-card__row">
<span>{copy().balanceAdjustmentLabel}</span>
<strong>
{member().purchaseOffsetMajor} {currency()}
</strong>
</div>
</Show>
</div>
</div>
</Card>
</Show>
<Show when={mode() === 'none'}>
<Card muted>
<div class="balance-card">
<div class="balance-card__header">
<span class="balance-card__label">{copy().homeNoPaymentTitle}</span>
</div>
<div class="balance-card__amounts">
<div class="balance-card__row">
<span>
{copy().homeUtilitiesUpcomingLabel.replace(
'{date}',
utilitiesUpcoming().dateLabel
)}
</span>
<strong>
{utilitiesUpcoming().daysUntil !== null
? copy().daysLeftLabel.replace(
'{count}',
String(utilitiesUpcoming().daysUntil)
)
: '—'}
</strong>
</div>
<div class="balance-card__row">
<span>
{copy().homeRentUpcomingLabel.replace(
'{date}',
rentUpcoming().dateLabel
)}
</span>
<strong>
{rentUpcoming().daysUntil !== null
? copy().daysLeftLabel.replace(
'{count}',
String(rentUpcoming().daysUntil)
)
: '—'}
</strong>
</div>
</div>
</div>
</Card>
</Show>
<Show when={mode() === 'utilities' && utilityLedger().length === 0}>
<Card>
<div class="balance-card">
<div class="balance-card__header">
<span class="balance-card__label">{copy().homeFillUtilitiesTitle}</span>
</div>
<p class="empty-state">{copy().homeFillUtilitiesBody}</p>
<div class="editor-grid">
<Field label={copy().utilityCategoryLabel} wide>
<Input
value={utilityDraft().billName}
onInput={(e) =>
setUtilityDraft((d) => ({
...d,
billName: e.currentTarget.value
}))
}
/>
</Field>
<Field label={copy().utilityAmount} wide>
<Input
type="number"
value={utilityDraft().amountMajor}
onInput={(e) =>
setUtilityDraft((d) => ({
...d,
amountMajor: e.currentTarget.value
}))
}
/>
</Field>
<div style={{ display: 'flex', gap: '10px' }}>
<Button
variant="primary"
loading={submittingUtilities()}
disabled={
!utilityDraft().billName.trim() ||
!utilityDraft().amountMajor.trim()
}
onClick={() => void handleSubmitUtilities()}
>
{submittingUtilities()
? copy().homeFillUtilitiesSubmitting
: copy().homeFillUtilitiesSubmitAction}
</Button>
<Button variant="ghost" onClick={() => navigate('/ledger')}>
{copy().homeFillUtilitiesOpenLedgerAction}
</Button>
</div>
</div>
</div>
</Card>
</Show>
<Show when={mode() === 'rent' && data().rentPaymentDestinations?.length}>
<div style={{ display: 'grid', gap: '12px' }}>
<For each={data().rentPaymentDestinations ?? []}>
{(destination) => (
<Card>
<div class="balance-card">
<div class="balance-card__header">
<span class="balance-card__label">{destination.label}</span>
</div>
<div class="balance-card__amounts">
<Show when={destination.recipientName}>
{(value) => (
<div class="balance-card__row">
<span>{copy().rentPaymentDestinationRecipient}</span>
<strong>
<button
class="copyable-detail"
classList={{ 'is-copied': copiedValue() === value() }}
type="button"
onClick={() => void handleCopy(value())}
>
<span>{value()}</span>
{copiedValue() === value() ? (
<Check size={14} />
) : (
<Copy size={14} />
)}
</button>
</strong>
</div>
)}
</Show>
<Show when={destination.bankName}>
{(value) => (
<div class="balance-card__row">
<span>{copy().rentPaymentDestinationBank}</span>
<strong>
<button
class="copyable-detail"
classList={{ 'is-copied': copiedValue() === value() }}
type="button"
onClick={() => void handleCopy(value())}
>
<span>{value()}</span>
{copiedValue() === value() ? (
<Check size={14} />
) : (
<Copy size={14} />
)}
</button>
</strong>
</div>
)}
</Show>
<div class="balance-card__row">
<span>{copy().rentPaymentDestinationAccount}</span>
<strong>
<button
class="copyable-detail"
classList={{
'is-copied': copiedValue() === destination.account
}}
type="button"
onClick={() => void handleCopy(destination.account)}
>
<span>{destination.account}</span>
{copiedValue() === destination.account ? (
<Check size={14} />
) : (
<Copy size={14} />
)}
</button>
</strong>
</div>
<Show when={destination.link}>
{(value) => (
<div class="balance-card__row">
<span>{copy().rentPaymentDestinationLink}</span>
<strong>
<button
class="copyable-detail"
classList={{ 'is-copied': copiedValue() === value() }}
type="button"
onClick={() => void handleCopy(value())}
>
<span>{value()}</span>
{copiedValue() === value() ? (
<Check size={14} />
) : (
<Copy size={14} />
)}
</button>
</strong>
</div>
)}
</Show>
<Show when={destination.note}>
{(value) => (
<div class="balance-card__row">
<span>{copy().rentPaymentDestinationNote}</span>
<strong>
<button
class="copyable-detail"
classList={{ 'is-copied': copiedValue() === value() }}
type="button"
onClick={() => void handleCopy(value())}
>
<span>{value()}</span>
{copiedValue() === value() ? (
<Check size={14} />
) : (
<Copy size={14} />
)}
</button>
</strong>
</div>
)}
</Show>
</div>
</div>
</Card>
)}
</For>
</div>
<div class="balance-card__amounts">
<div class="balance-card__row">
<span>{copy().shareRent}</span>
<strong>
{member().rentShareMajor} {data().currency}
</strong>
</div>
<div class="balance-card__row">
<span>{copy().shareUtilities}</span>
<strong>
{member().utilityShareMajor} {data().currency}
</strong>
</div>
<div class="balance-card__row balance-card__row--subtotal">
<span>{copy().totalDueLabel}</span>
<strong>
{subtotalMajor} {data().currency}
</strong>
</div>
<div class="balance-card__row">
<span>{copy().balanceAdjustmentLabel}</span>
<strong>
{member().purchaseOffsetMajor} {data().currency}
</strong>
</div>
<div
class={`balance-card__row balance-card__remaining ${memberRemainingClass(member())}`}
>
<span>{copy().remainingLabel}</span>
<strong>
{member().remainingMajor} {data().currency}
</strong>
</div>
</div>
</div>
</Card>
</Show>
</>
)
}}
</Show>
{/* Your balance card */}
<Show when={currentMemberLine()}>
{(member) => (
<>
<Show when={homeMode() !== 'none'}>
{(() => {
const subtotalMinor =
majorStringToMinor(member().rentShareMajor) +
majorStringToMinor(member().utilityShareMajor)
const subtotalMajor = minorToMajorString(subtotalMinor)
return (
<Card>
<div class="balance-card">
<div class="balance-card__header">
<span class="balance-card__label">{copy().yourBalanceTitle}</span>
<Show when={dueStatusBadge()}>
{(badge) => (
<Badge variant={badge().variant}>{badge().label}</Badge>
)}
</Show>
</div>
<div class="balance-card__amounts">
<div class="balance-card__row">
<span>{copy().shareRent}</span>
<strong>
{member().rentShareMajor} {data().currency}
</strong>
</div>
<div class="balance-card__row">
<span>{copy().shareUtilities}</span>
<strong>
{member().utilityShareMajor} {data().currency}
</strong>
</div>
<div class="balance-card__row balance-card__row--subtotal">
<span>{copy().totalDueLabel}</span>
<strong>
{subtotalMajor} {data().currency}
</strong>
</div>
<div class="balance-card__row">
<span>{copy().balanceAdjustmentLabel}</span>
<strong>
{member().purchaseOffsetMajor} {data().currency}
</strong>
</div>
<div
class={`balance-card__row balance-card__remaining ${memberRemainingClass(member())}`}
>
<span>{copy().remainingLabel}</span>
<strong>
{member().remainingMajor} {data().currency}
</strong>
</div>
</div>
</div>
</Card>
)
})()}
</Show>
<Show when={homeMode() === 'none'}>
<Card>
<div class="balance-card">
<div class="balance-card__header">
<span class="balance-card__label">{copy().homePurchasesTitle}</span>
</div>
<div class="balance-card__amounts">
<div class="balance-card__row balance-card__row--subtotal">
<span>{copy().homePurchasesOffsetLabel}</span>
<strong>
{member().purchaseOffsetMajor} {data().currency}
</strong>
</div>
<div class="balance-card__row">
<span>
{copy().homePurchasesTotalLabel.replace(
'{count}',
String(purchaseLedger().length)
)}
</span>
<strong>
{purchaseTotalMajor()} {data().currency}
</strong>
</div>
<div class="balance-card__row">
<span>{copy().homeMembersCountLabel}</span>
<strong>{data().members.length}</strong>
</div>
</div>
</div>
</Card>
</Show>
</>
)}
</Show>
{/* Rent FX card */}
<Show when={data().rentSourceCurrency !== data().currency}>
<Card muted>
@@ -173,6 +863,55 @@ export default function HomeRoute() {
</>
)}
</Show>
{/* Quick Payment Modal */}
<Modal
open={quickPaymentOpen()}
title={copy().quickPaymentTitle}
description={copy().quickPaymentBody.replace(
'{type}',
quickPaymentType() === 'rent' ? copy().shareRent : copy().shareUtilities
)}
closeLabel={copy().showLessAction}
onClose={() => setQuickPaymentOpen(false)}
footer={
<>
<Button variant="ghost" onClick={() => setQuickPaymentOpen(false)}>
{copy().showLessAction}
</Button>
<Button
variant="primary"
loading={submittingPayment()}
disabled={!quickPaymentAmount().trim()}
onClick={() => void handleQuickPaymentSubmit()}
>
{submittingPayment()
? copy().quickPaymentSubmitting
: copy().quickPaymentSubmitAction}
</Button>
</>
}
>
<div style={{ display: 'grid', gap: '12px' }}>
<Field label={copy().quickPaymentAmountLabel}>
<Input
type="number"
value={quickPaymentAmount()}
onInput={(e) => setQuickPaymentAmount(e.currentTarget.value)}
placeholder="0.00"
/>
</Field>
<Field label={copy().quickPaymentCurrencyLabel}>
<Input type="text" value={(dashboard()?.currency as 'USD' | 'GEL') ?? 'GEL'} disabled />
</Field>
</div>
</Modal>
{/* Toast Notifications */}
<Toast
state={toastState()}
onClose={() => setToastState({ ...toastState(), visible: false })}
/>
</div>
)
}

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

@@ -65,10 +65,34 @@ export default function SettingsRoute() {
utilitiesDueDay: adminSettings()?.settings.utilitiesDueDay ?? 4,
utilitiesReminderDay: adminSettings()?.settings.utilitiesReminderDay ?? 3,
timezone: adminSettings()?.settings.timezone ?? 'Asia/Tbilisi',
rentPaymentDestinations: [...(adminSettings()?.settings.rentPaymentDestinations ?? [])],
assistantContext: adminSettings()?.assistantConfig?.assistantContext ?? '',
assistantTone: adminSettings()?.assistantConfig?.assistantTone ?? ''
})
function openBillingEditor() {
const settings = adminSettings()
if (settings) {
setBillingForm({
householdName: settings.householdName ?? '',
settlementCurrency: settings.settings.settlementCurrency ?? 'GEL',
paymentBalanceAdjustmentPolicy:
settings.settings.paymentBalanceAdjustmentPolicy ?? 'utilities',
rentAmountMajor: minorToMajorString(BigInt(settings.settings.rentAmountMinor ?? '0')),
rentCurrency: settings.settings.rentCurrency ?? 'USD',
rentDueDay: settings.settings.rentDueDay ?? 20,
rentWarningDay: settings.settings.rentWarningDay ?? 17,
utilitiesDueDay: settings.settings.utilitiesDueDay ?? 4,
utilitiesReminderDay: settings.settings.utilitiesReminderDay ?? 3,
timezone: settings.settings.timezone ?? 'Asia/Tbilisi',
rentPaymentDestinations: [...(settings.settings.rentPaymentDestinations ?? [])],
assistantContext: settings.assistantConfig?.assistantContext ?? '',
assistantTone: settings.assistantConfig?.assistantTone ?? ''
})
}
setBillingEditorOpen(true)
}
// ── Pending members ──────────────────────────────
const [approvingId, setApprovingId] = createSignal<string | null>(null)
const [rejectingId, setRejectingId] = createSignal<string | null>(null)
@@ -267,7 +291,7 @@ export default function SettingsRoute() {
<span>{copy().timezone}</span>
<Badge variant="muted">{settings().settings.timezone}</Badge>
</div>
<Button variant="secondary" onClick={() => setBillingEditorOpen(true)}>
<Button variant="secondary" onClick={openBillingEditor}>
{copy().manageSettingsAction}
</Button>
</div>
@@ -477,12 +501,236 @@ export default function SettingsRoute() {
}
/>
</Field>
<Field label={copy().rentCurrencyLabel}>
<Select
value={billingForm().rentCurrency}
ariaLabel={copy().rentCurrencyLabel}
options={[
{ value: 'USD', label: 'USD' },
{ value: 'GEL', label: 'GEL' }
]}
onChange={(value) =>
setBillingForm((f) => ({ ...f, rentCurrency: value as 'USD' | 'GEL' }))
}
/>
</Field>
<Field label={copy().paymentBalanceAdjustmentPolicy}>
<Select
value={billingForm().paymentBalanceAdjustmentPolicy}
ariaLabel={copy().paymentBalanceAdjustmentPolicy}
options={[
{ value: 'utilities', label: copy().paymentBalanceAdjustmentUtilities },
{ value: 'rent', label: copy().paymentBalanceAdjustmentRent },
{ value: 'separate', label: copy().paymentBalanceAdjustmentSeparate }
]}
onChange={(value) =>
setBillingForm((f) => ({
...f,
paymentBalanceAdjustmentPolicy: value as 'utilities' | 'rent' | 'separate'
}))
}
/>
</Field>
<Field label={copy().rentWarningDay}>
<Input
type="number"
value={String(billingForm().rentWarningDay)}
onInput={(e) =>
setBillingForm((f) => ({
...f,
rentWarningDay: Number(e.currentTarget.value) || 0
}))
}
/>
</Field>
<Field label={copy().rentDueDay}>
<Input
type="number"
value={String(billingForm().rentDueDay)}
onInput={(e) =>
setBillingForm((f) => ({ ...f, rentDueDay: Number(e.currentTarget.value) || 0 }))
}
/>
</Field>
<Field label={copy().utilitiesReminderDay}>
<Input
type="number"
value={String(billingForm().utilitiesReminderDay)}
onInput={(e) =>
setBillingForm((f) => ({
...f,
utilitiesReminderDay: Number(e.currentTarget.value) || 0
}))
}
/>
</Field>
<Field label={copy().utilitiesDueDay}>
<Input
type="number"
value={String(billingForm().utilitiesDueDay)}
onInput={(e) =>
setBillingForm((f) => ({
...f,
utilitiesDueDay: Number(e.currentTarget.value) || 0
}))
}
/>
</Field>
<Field label={copy().timezone} hint={copy().timezoneHint}>
<Input
value={billingForm().timezone}
onInput={(e) => setBillingForm((f) => ({ ...f, timezone: e.currentTarget.value }))}
/>
</Field>
<Field label={copy().rentPaymentDestinationsTitle} wide>
<div style={{ display: 'grid', gap: '12px' }}>
<Show
when={billingForm().rentPaymentDestinations.length > 0}
fallback={<p class="empty-state">{copy().rentPaymentDestinationsEmpty}</p>}
>
<div style={{ display: 'grid', gap: '12px' }}>
<For each={billingForm().rentPaymentDestinations}>
{(destination, index) => (
<Card muted wide>
<div class="editor-grid">
<Field label={copy().rentPaymentDestinationLabel} wide>
<Input
value={destination.label}
onInput={(e) =>
setBillingForm((f) => {
const next = [...f.rentPaymentDestinations]
next[index()] = {
...next[index()]!,
label: e.currentTarget.value
}
return { ...f, rentPaymentDestinations: next }
})
}
/>
</Field>
<Field label={copy().rentPaymentDestinationRecipient} wide>
<Input
value={destination.recipientName ?? ''}
onInput={(e) =>
setBillingForm((f) => {
const next = [...f.rentPaymentDestinations]
next[index()] = {
...next[index()]!,
recipientName: e.currentTarget.value || null
}
return { ...f, rentPaymentDestinations: next }
})
}
/>
</Field>
<Field label={copy().rentPaymentDestinationBank} wide>
<Input
value={destination.bankName ?? ''}
onInput={(e) =>
setBillingForm((f) => {
const next = [...f.rentPaymentDestinations]
next[index()] = {
...next[index()]!,
bankName: e.currentTarget.value || null
}
return { ...f, rentPaymentDestinations: next }
})
}
/>
</Field>
<Field label={copy().rentPaymentDestinationAccount} wide>
<Input
value={destination.account}
onInput={(e) =>
setBillingForm((f) => {
const next = [...f.rentPaymentDestinations]
next[index()] = {
...next[index()]!,
account: e.currentTarget.value
}
return { ...f, rentPaymentDestinations: next }
})
}
/>
</Field>
<Field label={copy().rentPaymentDestinationLink} wide>
<Input
value={destination.link ?? ''}
onInput={(e) =>
setBillingForm((f) => {
const next = [...f.rentPaymentDestinations]
next[index()] = {
...next[index()]!,
link: e.currentTarget.value || null
}
return { ...f, rentPaymentDestinations: next }
})
}
/>
</Field>
<Field label={copy().rentPaymentDestinationNote} wide>
<Textarea
value={destination.note ?? ''}
onInput={(e) =>
setBillingForm((f) => {
const next = [...f.rentPaymentDestinations]
next[index()] = {
...next[index()]!,
note: e.currentTarget.value || null
}
return { ...f, rentPaymentDestinations: next }
})
}
/>
</Field>
<div style={{ display: 'flex', 'justify-content': 'flex-end' }}>
<Button
variant="ghost"
size="sm"
onClick={() =>
setBillingForm((f) => ({
...f,
rentPaymentDestinations: f.rentPaymentDestinations.filter(
(_, idx) => idx !== index()
)
}))
}
>
{copy().rentPaymentDestinationRemoveAction}
</Button>
</div>
</div>
</Card>
)}
</For>
</div>
</Show>
<div>
<Button
variant="secondary"
size="sm"
onClick={() =>
setBillingForm((f) => ({
...f,
rentPaymentDestinations: [
...f.rentPaymentDestinations,
{
label: '',
recipientName: null,
bankName: null,
account: '',
note: null,
link: null
}
]
}))
}
>
{copy().rentPaymentDestinationAddAction}
</Button>
</div>
</div>
</Field>
<Field label={copy().assistantToneLabel} hint={copy().assistantTonePlaceholder}>
<Input
value={billingForm().assistantTone}

6
apps/miniapp/src/theme.css
View File

@@ -87,4 +87,10 @@
--status-settled: #c2c2c2;
--status-due: #ffb866;
--status-overdue: #ff7676;
--status-danger: #ff7676;
/* ── Z-index scale ─────────────────────────────────── */
--z-toast: 9999;
--z-modal: 9000;
--z-dropdown: 1000;
}