feat(miniapp): add admin billing settings foundation

apps/miniapp/src/App.tsx

@@ -3,11 +3,16 @@ import { Match, Switch, createMemo, createSignal, onMount, type JSX } from 'soli
 import { dictionary, type Locale } from './i18n'
 import {
   approveMiniAppPendingMember,
+  fetchMiniAppAdminSettings,
   fetchMiniAppDashboard,
   fetchMiniAppPendingMembers,
   fetchMiniAppSession,
   joinMiniAppHousehold,
+  promoteMiniAppMember,
+  type MiniAppAdminSettingsPayload,
   updateMiniAppLocalePreference,
+  updateMiniAppBillingSettings,
+  upsertMiniAppUtilityCategory,
   type MiniAppDashboard,
   type MiniAppPendingMember
 } from './miniapp-api'
@@ -123,10 +128,24 @@ function App() {
   const [activeNav, setActiveNav] = createSignal<NavigationKey>('home')
   const [dashboard, setDashboard] = createSignal<MiniAppDashboard | null>(null)
   const [pendingMembers, setPendingMembers] = createSignal<readonly MiniAppPendingMember[]>([])
+  const [adminSettings, setAdminSettings] = createSignal<MiniAppAdminSettingsPayload | null>(null)
   const [joining, setJoining] = createSignal(false)
   const [approvingTelegramUserId, setApprovingTelegramUserId] = createSignal<string | null>(null)
+  const [promotingMemberId, setPromotingMemberId] = createSignal<string | null>(null)
   const [savingMemberLocale, setSavingMemberLocale] = createSignal(false)
   const [savingHouseholdLocale, setSavingHouseholdLocale] = createSignal(false)
+  const [savingBillingSettings, setSavingBillingSettings] = createSignal(false)
+  const [savingCategorySlug, setSavingCategorySlug] = createSignal<string | null>(null)
+  const [billingForm, setBillingForm] = createSignal({
+    rentAmountMajor: '',
+    rentCurrency: 'USD' as 'USD' | 'GEL',
+    rentDueDay: 20,
+    rentWarningDay: 17,
+    utilitiesDueDay: 4,
+    utilitiesReminderDay: 3,
+    timezone: 'Asia/Tbilisi'
+  })
+  const [newCategoryName, setNewCategoryName] = createSignal('')
 
   const copy = createMemo(() => dictionary[locale()])
   const onboardingSession = createMemo(() => {
@@ -167,6 +186,30 @@ function App() {
     }
   }
 
+  async function loadAdminSettings(initData: string) {
+    try {
+      const payload = await fetchMiniAppAdminSettings(initData)
+      setAdminSettings(payload)
+      setBillingForm({
+        rentAmountMajor: payload.settings.rentAmountMinor
+          ? (Number(payload.settings.rentAmountMinor) / 100).toFixed(2)
+          : '',
+        rentCurrency: payload.settings.rentCurrency,
+        rentDueDay: payload.settings.rentDueDay,
+        rentWarningDay: payload.settings.rentWarningDay,
+        utilitiesDueDay: payload.settings.utilitiesDueDay,
+        utilitiesReminderDay: payload.settings.utilitiesReminderDay,
+        timezone: payload.settings.timezone
+      })
+    } catch (error) {
+      if (import.meta.env.DEV) {
+        console.warn('Failed to load mini app admin settings', error)
+      }
+
+      setAdminSettings(null)
+    }
+  }
+
   async function bootstrap() {
     const fallbackLocale = detectLocale()
     setLocale(fallbackLocale)
@@ -223,6 +266,7 @@ function App() {
       await loadDashboard(initData)
       if (payload.member.isAdmin) {
         await loadPendingMembers(initData)
+        await loadAdminSettings(initData)
       }
     } catch {
       if (import.meta.env.DEV) {
@@ -315,6 +359,7 @@ function App() {
         await loadDashboard(initData)
         if (payload.member.isAdmin) {
           await loadPendingMembers(initData)
+          await loadAdminSettings(initData)
         }
         return
       }
@@ -430,6 +475,93 @@ function App() {
     }
   }
 
+  async function handleSaveBillingSettings() {
+    const initData = webApp?.initData?.trim()
+    const currentReady = readySession()
+    if (!initData || currentReady?.mode !== 'live' || !currentReady.member.isAdmin) {
+      return
+    }
+
+    setSavingBillingSettings(true)
+
+    try {
+      const settings = await updateMiniAppBillingSettings(initData, billingForm())
+      setAdminSettings((current) =>
+        current
+          ? {
+              ...current,
+              settings
+            }
+          : current
+      )
+    } finally {
+      setSavingBillingSettings(false)
+    }
+  }
+
+  async function handleSaveUtilityCategory(input: {
+    slug?: string
+    name: string
+    sortOrder: number
+    isActive: boolean
+  }) {
+    const initData = webApp?.initData?.trim()
+    const currentReady = readySession()
+    if (!initData || currentReady?.mode !== 'live' || !currentReady.member.isAdmin) {
+      return
+    }
+
+    setSavingCategorySlug(input.slug ?? '__new__')
+
+    try {
+      const category = await upsertMiniAppUtilityCategory(initData, input)
+      setAdminSettings((current) => {
+        if (!current) {
+          return current
+        }
+
+        const categories = current.categories.some((item) => item.slug === category.slug)
+          ? current.categories.map((item) => (item.slug === category.slug ? category : item))
+          : [...current.categories, category]
+
+        return {
+          ...current,
+          categories: [...categories].sort((left, right) => left.sortOrder - right.sortOrder)
+        }
+      })
+
+      if (!input.slug) {
+        setNewCategoryName('')
+      }
+    } finally {
+      setSavingCategorySlug(null)
+    }
+  }
+
+  async function handlePromoteMember(memberId: string) {
+    const initData = webApp?.initData?.trim()
+    const currentReady = readySession()
+    if (!initData || currentReady?.mode !== 'live' || !currentReady.member.isAdmin) {
+      return
+    }
+
+    setPromotingMemberId(memberId)
+
+    try {
+      const member = await promoteMiniAppMember(initData, memberId)
+      setAdminSettings((current) =>
+        current
+          ? {
+              ...current,
+              members: current.members.map((item) => (item.id === member.id ? member : item))
+            }
+          : current
+      )
+    } finally {
+      setPromotingMemberId(null)
+    }
+  }
+
   const renderPanel = () => {
     switch (activeNav()) {
       case 'balances':
@@ -493,6 +625,120 @@ function App() {
               </header>
               <p>{copy().householdSettingsBody}</p>
             </article>
+            <article class="balance-item">
+              <header>
+                <strong>{copy().billingSettingsTitle}</strong>
+              </header>
+              <div class="settings-grid">
+                <label class="settings-field">
+                  <span>{copy().rentAmount}</span>
+                  <input
+                    value={billingForm().rentAmountMajor}
+                    onInput={(event) =>
+                      setBillingForm((current) => ({
+                        ...current,
+                        rentAmountMajor: event.currentTarget.value
+                      }))
+                    }
+                  />
+                </label>
+                <label class="settings-field">
+                  <span>{copy().shareRent}</span>
+                  <select
+                    value={billingForm().rentCurrency}
+                    onChange={(event) =>
+                      setBillingForm((current) => ({
+                        ...current,
+                        rentCurrency: event.currentTarget.value as 'USD' | 'GEL'
+                      }))
+                    }
+                  >
+                    <option value="USD">USD</option>
+                    <option value="GEL">GEL</option>
+                  </select>
+                </label>
+                <label class="settings-field">
+                  <span>{copy().rentDueDay}</span>
+                  <input
+                    type="number"
+                    min="1"
+                    max="31"
+                    value={String(billingForm().rentDueDay)}
+                    onInput={(event) =>
+                      setBillingForm((current) => ({
+                        ...current,
+                        rentDueDay: Number(event.currentTarget.value)
+                      }))
+                    }
+                  />
+                </label>
+                <label class="settings-field">
+                  <span>{copy().rentWarningDay}</span>
+                  <input
+                    type="number"
+                    min="1"
+                    max="31"
+                    value={String(billingForm().rentWarningDay)}
+                    onInput={(event) =>
+                      setBillingForm((current) => ({
+                        ...current,
+                        rentWarningDay: Number(event.currentTarget.value)
+                      }))
+                    }
+                  />
+                </label>
+                <label class="settings-field">
+                  <span>{copy().utilitiesDueDay}</span>
+                  <input
+                    type="number"
+                    min="1"
+                    max="31"
+                    value={String(billingForm().utilitiesDueDay)}
+                    onInput={(event) =>
+                      setBillingForm((current) => ({
+                        ...current,
+                        utilitiesDueDay: Number(event.currentTarget.value)
+                      }))
+                    }
+                  />
+                </label>
+                <label class="settings-field">
+                  <span>{copy().utilitiesReminderDay}</span>
+                  <input
+                    type="number"
+                    min="1"
+                    max="31"
+                    value={String(billingForm().utilitiesReminderDay)}
+                    onInput={(event) =>
+                      setBillingForm((current) => ({
+                        ...current,
+                        utilitiesReminderDay: Number(event.currentTarget.value)
+                      }))
+                    }
+                  />
+                </label>
+                <label class="settings-field settings-field--wide">
+                  <span>{copy().timezone}</span>
+                  <input
+                    value={billingForm().timezone}
+                    onInput={(event) =>
+                      setBillingForm((current) => ({
+                        ...current,
+                        timezone: event.currentTarget.value
+                      }))
+                    }
+                  />
+                </label>
+              </div>
+              <button
+                class="ghost-button"
+                type="button"
+                disabled={savingBillingSettings()}
+                onClick={() => void handleSaveBillingSettings()}
+              >
+                {savingBillingSettings() ? copy().savingSettings : copy().saveSettingsAction}
+              </button>
+            </article>
             <article class="balance-item">
               <header>
                 <strong>{copy().householdLanguage}</strong>
@@ -521,6 +767,149 @@ function App() {
                 </button>
               </div>
             </article>
+            <article class="balance-item">
+              <header>
+                <strong>{copy().utilityCategoriesTitle}</strong>
+              </header>
+              <p>{copy().utilityCategoriesBody}</p>
+              <div class="balance-list">
+                {adminSettings()?.categories.map((category) => (
+                  <article class="ledger-item">
+                    <header>
+                      <strong>{category.name}</strong>
+                      <span>{category.isActive ? 'ON' : 'OFF'}</span>
+                    </header>
+                    <div class="settings-grid">
+                      <label class="settings-field settings-field--wide">
+                        <span>{copy().utilityCategoryName}</span>
+                        <input
+                          value={category.name}
+                          onInput={(event) =>
+                            setAdminSettings((current) =>
+                              current
+                                ? {
+                                    ...current,
+                                    categories: current.categories.map((item) =>
+                                      item.slug === category.slug
+                                        ? {
+                                            ...item,
+                                            name: event.currentTarget.value
+                                          }
+                                        : item
+                                    )
+                                  }
+                                : current
+                            )
+                          }
+                        />
+                      </label>
+                      <label class="settings-field">
+                        <span>{copy().utilityCategoryActive}</span>
+                        <select
+                          value={category.isActive ? 'true' : 'false'}
+                          onChange={(event) =>
+                            setAdminSettings((current) =>
+                              current
+                                ? {
+                                    ...current,
+                                    categories: current.categories.map((item) =>
+                                      item.slug === category.slug
+                                        ? {
+                                            ...item,
+                                            isActive: event.currentTarget.value === 'true'
+                                          }
+                                        : item
+                                    )
+                                  }
+                                : current
+                            )
+                          }
+                        >
+                          <option value="true">ON</option>
+                          <option value="false">OFF</option>
+                        </select>
+                      </label>
+                    </div>
+                    <button
+                      class="ghost-button"
+                      type="button"
+                      disabled={savingCategorySlug() === category.slug}
+                      onClick={() =>
+                        void handleSaveUtilityCategory({
+                          slug: category.slug,
+                          name:
+                            adminSettings()?.categories.find((item) => item.slug === category.slug)
+                              ?.name ?? category.name,
+                          sortOrder: category.sortOrder,
+                          isActive:
+                            adminSettings()?.categories.find((item) => item.slug === category.slug)
+                              ?.isActive ?? category.isActive
+                        })
+                      }
+                    >
+                      {savingCategorySlug() === category.slug
+                        ? copy().savingCategory
+                        : copy().saveCategoryAction}
+                    </button>
+                  </article>
+                ))}
+                <article class="ledger-item">
+                  <label class="settings-field settings-field--wide">
+                    <span>{copy().utilityCategoryName}</span>
+                    <input
+                      value={newCategoryName()}
+                      onInput={(event) => setNewCategoryName(event.currentTarget.value)}
+                    />
+                  </label>
+                  <button
+                    class="ghost-button"
+                    type="button"
+                    disabled={
+                      newCategoryName().trim().length === 0 || savingCategorySlug() === '__new__'
+                    }
+                    onClick={() =>
+                      void handleSaveUtilityCategory({
+                        name: newCategoryName(),
+                        sortOrder: adminSettings()?.categories.length ?? 0,
+                        isActive: true
+                      })
+                    }
+                  >
+                    {savingCategorySlug() === '__new__'
+                      ? copy().savingCategory
+                      : copy().addCategoryAction}
+                  </button>
+                </article>
+              </div>
+            </article>
+            <article class="balance-item">
+              <header>
+                <strong>{copy().adminsTitle}</strong>
+              </header>
+              <p>{copy().adminsBody}</p>
+              <div class="balance-list">
+                {adminSettings()?.members.map((member) => (
+                  <article class="ledger-item">
+                    <header>
+                      <strong>{member.displayName}</strong>
+                      <span>{member.isAdmin ? copy().adminTag : copy().residentTag}</span>
+                    </header>
+                    {!member.isAdmin ? (
+                      <button
+                        class="ghost-button"
+                        type="button"
+                        disabled={promotingMemberId() === member.id}
+                        onClick={() => void handlePromoteMember(member.id)}
+                      >
+                        {promotingMemberId() === member.id
+                          ? copy().promotingAdmin
+                          : copy().promoteAdminAction}
+                      </button>
+                    ) : null}
+                  </article>
+                ))}
+              </div>
+            </article>
             <article class="balance-item">
               <header>
                 <strong>{copy().pendingMembersTitle}</strong>

apps/miniapp/src/i18n.ts

@@ -54,6 +54,26 @@ export const dictionary = {
     latestActivityEmpty: 'Recent utility and purchase entries will appear here.',
     householdSettingsTitle: 'Household settings',
     householdSettingsBody: 'Control household defaults and approve roommates who requested access.',
+    billingSettingsTitle: 'Billing settings',
+    rentAmount: 'Rent amount',
+    rentDueDay: 'Rent due day',
+    rentWarningDay: 'Rent warning day',
+    utilitiesDueDay: 'Utilities due day',
+    utilitiesReminderDay: 'Utilities reminder day',
+    timezone: 'Timezone',
+    saveSettingsAction: 'Save settings',
+    savingSettings: 'Saving settings…',
+    utilityCategoriesTitle: 'Utility categories',
+    utilityCategoriesBody: 'Manage the categories admins use for monthly utility entry.',
+    utilityCategoryName: 'Category name',
+    utilityCategoryActive: 'Active',
+    addCategoryAction: 'Add category',
+    saveCategoryAction: 'Save category',
+    savingCategory: 'Saving…',
+    adminsTitle: 'Admins',
+    adminsBody: 'Promote trusted household members so they can manage billing and approvals.',
+    promoteAdminAction: 'Promote to admin',
+    promotingAdmin: 'Promoting…',
     residentHouseTitle: 'Household access',
     residentHouseBody:
       'Your admins manage household settings and approvals here. You can still switch your own language above.',
@@ -120,6 +140,28 @@ export const dictionary = {
     latestActivityEmpty: 'Здесь появятся последние коммунальные платежи и покупки.',
     householdSettingsTitle: 'Настройки household',
     householdSettingsBody: 'Здесь можно менять язык household и подтверждать новых соседей.',
+    billingSettingsTitle: 'Настройки биллинга',
+    rentAmount: 'Сумма аренды',
+    rentDueDay: 'День оплаты аренды',
+    rentWarningDay: 'День напоминания по аренде',
+    utilitiesDueDay: 'День оплаты коммуналки',
+    utilitiesReminderDay: 'День напоминания по коммуналке',
+    timezone: 'Часовой пояс',
+    saveSettingsAction: 'Сохранить настройки',
+    savingSettings: 'Сохраняем настройки…',
+    utilityCategoriesTitle: 'Категории коммуналки',
+    utilityCategoriesBody:
+      'Управляй категориями, которые админы используют для ежемесячного ввода коммунальных счетов.',
+    utilityCategoryName: 'Название категории',
+    utilityCategoryActive: 'Активна',
+    addCategoryAction: 'Добавить категорию',
+    saveCategoryAction: 'Сохранить категорию',
+    savingCategory: 'Сохраняем…',
+    adminsTitle: 'Админы',
+    adminsBody:
+      'Повышай доверенных участников, чтобы они могли управлять биллингом и подтверждениями.',
+    promoteAdminAction: 'Сделать админом',
+    promotingAdmin: 'Повышаем…',
     residentHouseTitle: 'Доступ к household',
     residentHouseBody:
       'Настройки household и подтверждение заявок управляются админами. Свой язык можно менять переключателем выше.',

apps/miniapp/src/index.css

@@ -283,6 +283,37 @@ button {
   font-size: clamp(1.2rem, 4vw, 1.7rem);
 }
 
+.settings-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.settings-field {
+  display: grid;
+  gap: 6px;
+}
+
+.settings-field span {
+  color: #c6c2bb;
+  font-size: 0.82rem;
+}
+
+.settings-field input,
+.settings-field select {
+  width: 100%;
+  border: 1px solid rgb(255 255 255 / 0.12);
+  border-radius: 14px;
+  padding: 12px 14px;
+  background: rgb(255 255 255 / 0.04);
+  color: inherit;
+}
+
+.settings-field--wide {
+  grid-column: 1 / -1;
+}
+
 .panel--wide {
   min-height: 170px;
 }
@@ -302,6 +333,10 @@ button {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  .settings-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .panel--wide {
     grid-column: 1 / -1;
   }

apps/miniapp/src/miniapp-api.ts

@@ -34,6 +34,32 @@ export interface MiniAppPendingMember {
   languageCode: string | null
 }
 
+export interface MiniAppMember {
+  id: string
+  displayName: string
+  isAdmin: boolean
+}
+
+export interface MiniAppBillingSettings {
+  householdId: string
+  rentAmountMinor: string | null
+  rentCurrency: 'USD' | 'GEL'
+  rentDueDay: number
+  rentWarningDay: number
+  utilitiesDueDay: number
+  utilitiesReminderDay: number
+  timezone: string
+}
+
+export interface MiniAppUtilityCategory {
+  id: string
+  householdId: string
+  slug: string
+  name: string
+  sortOrder: number
+  isActive: boolean
+}
+
 export interface MiniAppDashboard {
   period: string
   currency: 'USD' | 'GEL'
@@ -57,6 +83,12 @@ export interface MiniAppDashboard {
   }[]
 }
 
+export interface MiniAppAdminSettingsPayload {
+  settings: MiniAppBillingSettings
+  categories: readonly MiniAppUtilityCategory[]
+  members: readonly MiniAppMember[]
+}
+
 function apiBaseUrl(): string {
   const runtimeConfigured = runtimeBotApiUrl()
   if (runtimeConfigured) {
@@ -260,3 +292,142 @@ export async function updateMiniAppLocalePreference(
 
   return payload.locale
 }
+
+export async function fetchMiniAppAdminSettings(
+  initData: string
+): Promise<MiniAppAdminSettingsPayload> {
+  const response = await fetch(`${apiBaseUrl()}/api/miniapp/admin/settings`, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json'
+    },
+    body: JSON.stringify({
+      initData
+    })
+  })
+
+  const payload = (await response.json()) as {
+    ok: boolean
+    authorized?: boolean
+    settings?: MiniAppBillingSettings
+    categories?: MiniAppUtilityCategory[]
+    members?: MiniAppMember[]
+    error?: string
+  }
+
+  if (
+    !response.ok ||
+    !payload.authorized ||
+    !payload.settings ||
+    !payload.categories ||
+    !payload.members
+  ) {
+    throw new Error(payload.error ?? 'Failed to load admin settings')
+  }
+
+  return {
+    settings: payload.settings,
+    categories: payload.categories,
+    members: payload.members
+  }
+}
+
+export async function updateMiniAppBillingSettings(
+  initData: string,
+  input: {
+    rentAmountMajor?: string
+    rentCurrency: 'USD' | 'GEL'
+    rentDueDay: number
+    rentWarningDay: number
+    utilitiesDueDay: number
+    utilitiesReminderDay: number
+    timezone: string
+  }
+): Promise<MiniAppBillingSettings> {
+  const response = await fetch(`${apiBaseUrl()}/api/miniapp/admin/settings/update`, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json'
+    },
+    body: JSON.stringify({
+      initData,
+      ...input
+    })
+  })
+
+  const payload = (await response.json()) as {
+    ok: boolean
+    authorized?: boolean
+    settings?: MiniAppBillingSettings
+    error?: string
+  }
+
+  if (!response.ok || !payload.authorized || !payload.settings) {
+    throw new Error(payload.error ?? 'Failed to update billing settings')
+  }
+
+  return payload.settings
+}
+
+export async function upsertMiniAppUtilityCategory(
+  initData: string,
+  input: {
+    slug?: string
+    name: string
+    sortOrder: number
+    isActive: boolean
+  }
+): Promise<MiniAppUtilityCategory> {
+  const response = await fetch(`${apiBaseUrl()}/api/miniapp/admin/utility-categories/upsert`, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json'
+    },
+    body: JSON.stringify({
+      initData,
+      ...input
+    })
+  })
+
+  const payload = (await response.json()) as {
+    ok: boolean
+    authorized?: boolean
+    category?: MiniAppUtilityCategory
+    error?: string
+  }
+
+  if (!response.ok || !payload.authorized || !payload.category) {
+    throw new Error(payload.error ?? 'Failed to save utility category')
+  }
+
+  return payload.category
+}
+
+export async function promoteMiniAppMember(
+  initData: string,
+  memberId: string
+): Promise<MiniAppMember> {
+  const response = await fetch(`${apiBaseUrl()}/api/miniapp/admin/members/promote`, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json'
+    },
+    body: JSON.stringify({
+      initData,
+      memberId
+    })
+  })
+
+  const payload = (await response.json()) as {
+    ok: boolean
+    authorized?: boolean
+    member?: MiniAppMember
+    error?: string
+  }
+
+  if (!response.ok || !payload.authorized || !payload.member) {
+    throw new Error(payload.error ?? 'Failed to promote member')
+  }
+
+  return payload.member
+}