diff --git a/apps/miniapp/src/App.tsx b/apps/miniapp/src/App.tsx index 3e36ff7..c543842 100644 --- a/apps/miniapp/src/App.tsx +++ b/apps/miniapp/src/App.tsx @@ -1028,44 +1028,186 @@ function App() { ) case 'house': return readySession()?.member.isAdmin ? ( -
-
+
+
{copy().householdSettingsTitle} + {adminSettings()?.settings.settlementCurrency ?? '—'}

{copy().householdSettingsBody}

+
+
+ {copy().billingCycleTitle} + {cycleState()?.cycle?.period ?? copy().billingCycleEmpty} +
+
+ {copy().settlementCurrency} + {adminSettings()?.settings.settlementCurrency ?? '—'} +
+
+ {copy().membersCount} + {String(adminSettings()?.members.length ?? 0)} +
+
+ {copy().pendingRequests} + {String(pendingMembers().length)} +
+
-
-
- {copy().billingCycleTitle} - {cycleState()?.cycle?.period ?? copy().billingCycleEmpty} + +
+
+
+

{copy().billingCycleTitle}

+

{copy().billingSettingsTitle}

+
- {cycleState()?.cycle ? ( - <> -

- {copy().billingCycleStatus.replace( - '{currency}', - cycleState()?.cycle?.currency ?? cycleForm().currency - )} -

- - {(data) => ( +
+
+
+ {copy().billingCycleTitle} + {cycleState()?.cycle?.period ?? copy().billingCycleEmpty} +
+ {cycleState()?.cycle ? ( + <>

- {copy().shareRent}: {data().rentSourceAmountMajor}{' '} - {data().rentSourceCurrency} - {data().rentSourceCurrency !== data().currency - ? ` -> ${data().rentDisplayAmountMajor} ${data().currency}` - : ''} + {copy().billingCycleStatus.replace( + '{currency}', + cycleState()?.cycle?.currency ?? cycleForm().currency + )}

- )} - + + {(data) => ( +

+ {copy().shareRent}: {data().rentSourceAmountMajor}{' '} + {data().rentSourceCurrency} + {data().rentSourceCurrency !== data().currency + ? ` -> ${data().rentDisplayAmountMajor} ${data().currency}` + : ''} +

+ )} + +
+ + +
+
+ + +
+ + ) : ( + <> +

{copy().billingCycleOpenHint}

+
+ + +
+ + + )} +
+ +
+
+ {copy().billingSettingsTitle} + {billingForm().settlementCurrency} +
+
-
+ +
+ +
+
+ {copy().householdLanguage} + {readySession()?.member.householdDefaultLocale.toUpperCase()} +
+

{copy().householdSettingsBody}

+
+
+
+
+ +
+
+
+

{copy().utilityCategoriesTitle}

+

{copy().utilityCategoriesBody}

+
+
+
+
+
+ {copy().utilityLedgerTitle} + {cycleState()?.cycle?.currency ?? billingForm().settlementCurrency} +
-
-
- {copy().billingSettingsTitle} -
-
- - - - - - - - -
- -
-
-
- {copy().householdLanguage} - {readySession()?.member.householdDefaultLocale.toUpperCase()} -
-
- - -
-
-
-
- {copy().utilityCategoriesTitle} -
-

{copy().utilityCategoriesBody}

-
- {adminSettings()?.categories.map((category) => ( -
-
- {category.name} - {category.isActive ? 'ON' : 'OFF'} -
-
+
+ +
+
+ {copy().utilityCategoriesTitle} + {String(adminSettings()?.categories.length ?? 0)} +
+
+ {adminSettings()?.categories.map((category) => ( +
+
+ {category.name} + {category.isActive ? 'ON' : 'OFF'} +
+
+ + +
+ +
+ ))} +
- -
- -
- ))} -
- - -
-
-
-
-
- {copy().adminsTitle} -
-

{copy().adminsBody}

-
- {adminSettings()?.members.map((member) => ( -
-
- {member.displayName} - {member.isAdmin ? copy().adminTag : copy().residentTag} -
- - - {!member.isAdmin ? ( - ) : null} -
- ))} +
+
+
-
-
-
- {copy().pendingMembersTitle} + + +
+
+
+

{copy().adminsTitle}

+

{copy().adminsBody}

+
-

{copy().pendingMembersBody}

-
- {pendingMembers().length === 0 ? ( -
-

{copy().pendingMembersEmpty}

-
- ) : ( - pendingMembers().map((member) => ( +
+
+
+ {copy().adminsTitle} + {String(adminSettings()?.members.length ?? 0)} +
+
+ {adminSettings()?.members.map((member) => ( +
+
+ {member.displayName} + {member.isAdmin ? copy().adminTag : copy().residentTag} +
+
+ +
+
+ + {!member.isAdmin ? ( + + ) : null} +
+
+ ))} +
+
+
- {member.displayName} - {member.telegramUserId} + {copy().pendingMembersTitle} + {String(pendingMembers().length)}
-

- {member.username - ? copy().pendingMemberHandle.replace('{username}', member.username) - : (member.languageCode ?? 'Telegram')} -

- +

{copy().pendingMembersBody}

+ {pendingMembers().length === 0 ? ( +

{copy().pendingMembersEmpty}

+ ) : ( +
+ {pendingMembers().map((member) => ( +
+
+ {member.displayName} + {member.telegramUserId} +
+

+ {member.username + ? copy().pendingMemberHandle.replace('{username}', member.username) + : (member.languageCode ?? 'Telegram')} +

+ +
+ ))} +
+ )}
- )) - )} +
+
) : (
diff --git a/apps/miniapp/src/index.css b/apps/miniapp/src/index.css index a5d4d2a..fc6111a 100644 --- a/apps/miniapp/src/index.css +++ b/apps/miniapp/src/index.css @@ -229,7 +229,9 @@ button { .balance-list, .ledger-list, -.home-grid { +.home-grid, +.admin-layout, +.admin-sublist { display: grid; gap: 12px; } @@ -316,6 +318,52 @@ button { margin-top: 12px; } +.admin-layout { + gap: 18px; +} + +.admin-hero { + gap: 16px; +} + +.admin-summary-grid, +.admin-grid { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: 12px; +} + +.admin-section { + display: grid; + gap: 12px; +} + +.admin-section__header { + display: flex; + align-items: end; + justify-content: space-between; + gap: 12px; +} + +.admin-section__header h3 { + margin: 0; + font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif; + letter-spacing: -0.04em; + font-size: 1.15rem; +} + +.admin-section__header p { + margin-top: 6px; +} + +.admin-sublist { + margin-top: 12px; +} + +.admin-card--wide { + min-width: 0; +} + .settings-field { display: grid; gap: 6px; @@ -374,6 +422,14 @@ button { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .admin-summary-grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .admin-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -381,6 +437,10 @@ button { .panel--wide { grid-column: 1 / -1; } + + .admin-card--wide { + grid-column: 1 / -1; + } } @media (min-width: 980px) {