Cleaned up some backend logging, refactored module styles, pagination, and transaction cards.

2026-01-15 20:50:34 -05:00 · 2026-01-15 20:50:34 -05:00 · df6e4cc81f
parent be3d554b7f
commit df6e4cc81f
9 changed files with 98 additions and 192 deletions
--- a/finnow-api/source/auth/api.d
+++ b/finnow-api/source/auth/api.d
@ -43,4 +43,5 @@ void changeMyPassword(ref ServerHttpRequest request, ref ServerHttpResponse resp
    AuthContext auth = getAuthContext(request);
    PasswordChangeRequest data = readJsonBodyAs!PasswordChangeRequest(request);
    changePassword(auth.user, new FileSystemUserRepository(), data.currentPassword, data.newPassword);
+    infoF!"User \"%s\" changed their password."(auth.user.username);
 }
--- a/finnow-api/source/auth/api_public.d
+++ b/finnow-api/source/auth/api_public.d
@ -19,7 +19,7 @@ void postLogin(ref ServerHttpRequest request, ref ServerHttpResponse response) {
    LoginData data = readJsonBodyAs!LoginData(request);
    string token = generateTokenForLogin(data.username, data.password);
    response.writeBodyString(token);
-    debugF!"Generated token for user: %s"(data.username);
+    infoF!"User \"%s\" logged in."(data.username);
 }

 struct UsernameAvailabilityResponse {
@ -71,6 +71,6 @@ void postRegister(ref ServerHttpRequest request, ref ServerHttpResponse response
    }
    
    User user = createNewUser(userRepo, registrationData.username, registrationData.password);
-    infoF!"Created user: %s"(registrationData.username);
+    infoF!"User \"%s\" registered."(registrationData.username);
    response.writeBodyString(user.username);
 }
--- a/web-app/src/assets/main.css
+++ b/web-app/src/assets/main.css
@ -39,13 +39,40 @@ a:hover {
 .app-module-container {
  display: flex;
  flex-wrap: wrap;
-  gap: 20px;
+  align-items: stretch;
+  gap: 1rem;
  padding: 1rem;
 }

-@media (max-width: 600px) {
-  .app-module-container {
-    padding: 0.5rem;
+.app-module {
+  width: calc(33.33% - 1.666rem);
+  display: inline-block;
+  min-height: 200px;
+  background-color: var(--bg-lighter);
+  border-radius: 0.5rem;
+  padding: 0.25rem 0.5rem 0.5rem 0.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.app-module-full-width {
+  width: 100%;
+}
+
+.app-module-header {
+  margin: 0;
+}
+
+@media (max-width: 1600px) {
+  .app-module {
+    width: calc(50% - 1.5rem);
+  }
+}
+
+@media (max-width: 800px) {
+  .app-module {
+    width: 100%;
  }
 }

--- a/web-app/src/components/HomeModule.vue
+++ b/web-app/src/components/HomeModule.vue
@ -14,20 +14,3 @@ defineProps<{ title: string }>()
    </ButtonBar>
  </div>
 </template>
-<style lang="css">
-.app-module {
-  min-width: 300px;
-  min-height: 200px;
-  flex-grow: 1;
-  background-color: var(--bg-lighter);
-  border-radius: 0.5rem;
-  padding: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.app-module-header {
-  margin: 0;
-}
-</style>
--- a/web-app/src/components/TransactionCard.vue
+++ b/web-app/src/components/TransactionCard.vue
@ -30,12 +30,10 @@ function goToTransaction() {
 }
 </script>
 <template>
-  <div
-    class="transaction-card"
-    @click="goToTransaction()"
-  >
+  <div class="transaction-card" @click="goToTransaction()">
+    <div>
      <!-- Top row contains timestamp and amount. -->
-    <div class="transaction-card-top-row">
+      <div style="display: flex; justify-content: space-between;">
        <div>
          <div class="font-mono font-size-xsmall text-normal">Transaction #{{ tx.id }}</div>
          <div class="text-muted font-mono font-size-xsmall">
@ -43,25 +41,16 @@ function goToTransaction() {
          </div>
        </div>
        <div>
-        <div
-          class="font-mono align-right font-size-small"
-          :class="{
+          <div class="font-mono align-right font-size-small" :class="{
            'text-positive': moneyStyle === 'positive',
            'text-negative': moneyStyle === 'negative',
-          }"
-        >
+          }">
            {{ formatMoney(tx.amount, tx.currency) }}
          </div>
-        <div
-          v-if="tx.creditedAccount !== null"
-          class="font-size-small text-muted"
-        >
+          <div v-if="tx.creditedAccount !== null" class="font-size-small text-muted">
            Credited to <span class="text-normal font-bold">{{ tx.creditedAccount.name }}</span>
          </div>
-        <div
-          v-if="tx.debitedAccount !== null"
-          class="font-size-small text-muted"
-        >
+          <div v-if="tx.debitedAccount !== null" class="font-size-small text-muted">
            Debited to <span class="text-normal font-bold">{{ tx.debitedAccount.name }}</span>
          </div>
        </div>
@ -71,47 +60,44 @@ function goToTransaction() {
      <div>
        <p class="transaction-card-description">{{ tx.description }}</p>
      </div>
+    </div>

    <!-- Bottom row contains other links. -->
    <div style="display: flex; justify-content: space-between">
      <div>
-        <CategoryLabel
-          :category="tx.category"
-          v-if="tx.category"
-          style="margin-left: 0"
-        />
+        <CategoryLabel :category="tx.category" v-if="tx.category" style="margin-left: 0" />
        <AppBadge v-if="tx.vendor">{{ tx.vendor.name }}</AppBadge>
      </div>
      <div>
-        <TagLabel
-          v-for="tag in tx.tags"
-          :key="tag"
-          :tag="tag"
-        />
+        <!-- Only show the first 3 tags, and add a "+N" badge for any more. -->
+        <TagLabel v-for="tag in tx.tags.slice(0, 3)" :key="tag" :tag="tag" />
+        <AppBadge v-if="tx.tags.length > 3" class="text-muted">+{{ tx.tags.length - 3 }}</AppBadge>
      </div>
    </div>
  </div>
 </template>
-<style lang="css">
+<style lang="css" scoped>
 .transaction-card {
  background-color: var(--bg);
  padding: 0.5rem;
  border-radius: 0.5rem;
  margin: 0.5rem 0;
  cursor: pointer;
+  height: 120px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }

 .transaction-card:hover {
  background-color: var(--bg-darker);
 }

-.transaction-card-top-row {
-  display: flex;
-  justify-content: space-between;
-}
-
 .transaction-card-description {
  margin: 0.25rem 0;
  font-size: 0.9rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 </style>
--- a/web-app/src/components/common/PaginationControls.vue
+++ b/web-app/src/components/common/PaginationControls.vue
@ -28,44 +28,18 @@ function incrementPage(step: number) {
 <template>
  <div>
    <div v-if="page && page.totalElements > 0">
-      <AppButton
-        size="sm"
-        :disabled="!page || page.isFirst"
-        @click="updatePage(1)"
-      >
-        First Page
-      </AppButton>
+      <AppButton size="sm" icon="backward-step" :disabled="!page || page.isFirst" @click="updatePage(1)" />

-      <AppButton
-        size="sm"
-        :disabled="!page || page.isFirst"
-        @click="incrementPage(-1)"
-      >
-        Previous Page
-      </AppButton>
+      <AppButton size="sm" icon="chevron-left" :disabled="!page || page.isFirst" @click="incrementPage(-1)" />

-      <span
-        style="min-width: 100px; text-align: center; display: inline-block"
-        class="font-size-xsmall"
-      >
+      <span style="min-width: 100px; text-align: center; display: inline-block" class="font-size-xsmall">
        Page <span class="font-bold">{{ page?.pageRequest.page }}</span> of {{ page?.totalPages }}
      </span>

-      <AppButton
-        size="sm"
-        :disabled="!page || page.isLast"
-        @click="incrementPage(1)"
-      >
-        Next Page
-      </AppButton>
+      <AppButton size="sm" icon="chevron-right" :disabled="!page || page.isLast" @click="incrementPage(1)" />

-      <AppButton
-        size="sm"
-        :disabled="!page || page.isLast"
-        @click="updatePage(page?.totalPages ?? 0)"
-      >
-        Last Page
-      </AppButton>
+      <AppButton size="sm" icon="forward-step" :disabled="!page || page.isLast"
+        @click="updatePage(page?.totalPages ?? 0)" />
    </div>
  </div>
 </template>
--- a/web-app/src/pages/home/AnalyticsModule.vue
+++ b/web-app/src/pages/home/AnalyticsModule.vue
@ -104,68 +104,37 @@ onMounted(async () => {
 })
 </script>
 <template>
-  <HomeModule
-    title="Analytics"
-    style="max-width: 800px; min-height: 200px"
-  >
+  <HomeModule title="Analytics">
    <FormGroup>
      <FormControl label="Chart">
        <select v-model="selectedChart">
-          <option
-            v-for="ct in AnalyticsChartTypes"
-            :key="ct.id"
-            :value="ct"
-          >
+          <option v-for="ct in AnalyticsChartTypes" :key="ct.id" :value="ct">
            {{ ct.name }}
          </option>
        </select>
      </FormControl>
    </FormGroup>

-    <BalanceTimeSeriesChart
-      v-if="currency && balanceTimeSeriesData && selectedChart.id === 'account-balances'"
-      title="Account Balances"
-      :currency="currency"
-      :time-frame="timeFrame"
-      :data="accountBalancesData"
-    />
+    <BalanceTimeSeriesChart v-if="currency && balanceTimeSeriesData && selectedChart.id === 'account-balances'"
+      title="Account Balances" :currency="currency" :time-frame="timeFrame" :data="accountBalancesData" />

-    <BalanceTimeSeriesChart
-      v-if="currency && balanceTimeSeriesData && selectedChart.id === 'total-balances'"
-      title="Total Balances"
-      :currency="currency"
-      :time-frame="timeFrame"
-      :data="totalBalancesData"
-    />
+    <BalanceTimeSeriesChart v-if="currency && balanceTimeSeriesData && selectedChart.id === 'total-balances'"
+      title="Total Balances" :currency="currency" :time-frame="timeFrame" :data="totalBalancesData" />

-    <CategorySpendPieChart
-      v-if="currency && categorySpendTimeSeriesData && selectedChart.id === 'category-spend'"
-      :currency="currency"
-      :time-frame="timeFrame"
-      :data="categorySpendTimeSeriesData"
-    />
+    <CategorySpendPieChart v-if="currency && categorySpendTimeSeriesData && selectedChart.id === 'category-spend'"
+      :currency="currency" :time-frame="timeFrame" :data="categorySpendTimeSeriesData" />

    <FormGroup>
      <FormControl label="Currency">
-        <select
-          v-model="currency"
-          :disabled="availableCurrencies.length < 2"
-        >
-          <option
-            v-for="currency in availableCurrencies"
-            :key="currency.code"
-            :value="currency"
-          >
+        <select v-model="currency" :disabled="availableCurrencies.length < 2">
+          <option v-for="currency in availableCurrencies" :key="currency.code" :value="currency">
            {{ currency.code }}
          </option>
        </select>
      </FormControl>
      <FormControl label="Time Frame">
        <select v-model="timeFrame">
-          <option
-            :value="{}"
-            selected
-          >
+          <option :value="{}" selected>
            All Time
          </option>
          <option :value="{ start: sub(new Date(), { days: 30 }) }">Last 30 days</option>
--- a/web-app/src/pages/home/ProfileModule.vue
+++ b/web-app/src/pages/home/ProfileModule.vue
@ -43,19 +43,12 @@ async function downloadData() {
 }
 </script>
 <template>
-  <HomeModule
-    title="Profile"
-    v-if="profile"
-  >
+  <HomeModule title="Profile" v-if="profile">
    <template v-slot:default>
-      <p>Your currently selected profile is: {{ profile.name }}</p>
+      <p>Your currently selected profile is: <strong>{{ profile.name }}</strong></p>
      <p>
-        <RouterLink :to="`/profiles/${profile.name}/vendors`">View all vendors here.</RouterLink>
-      </p>
-      <p>
-        <RouterLink :to="`/profiles/${profile.name}/categories`"
-          >View all categories here.</RouterLink
-        >
+        <AppButton size="sm" @click="router.push(`/profiles/${profile.name}/vendors`)">Vendors</AppButton>
+        <AppButton size="sm" @click="router.push(`/profiles/${profile.name}/categories`)">Categories</AppButton>
      </p>

      <ConfirmModal ref="confirmDeleteModal">
@ -67,24 +60,9 @@ async function downloadData() {
      </ConfirmModal>
    </template>
    <template v-slot:actions>
-      <AppButton
-        icon="folder-open"
-        @click="router.push('/profiles')"
-        >Choose another profile</AppButton
-      >
-      <AppButton
-        icon="download"
-        @click="downloadData()"
-        size="sm"
-        >Download Data</AppButton
-      >
-      <AppButton
-        button-style="secondary"
-        icon="trash"
-        @click="deleteProfile()"
-        size="sm"
-        >Delete</AppButton
-      >
+      <AppButton icon="folder-open" @click="router.push('/profiles')">Choose another profile</AppButton>
+      <AppButton icon="download" @click="downloadData()" size="sm">Download Data</AppButton>
+      <AppButton button-style="secondary" icon="trash" @click="deleteProfile()" size="sm">Delete</AppButton>
    </template>
  </HomeModule>
 </template>
--- a/web-app/src/pages/home/TransactionsModule.vue
+++ b/web-app/src/pages/home/TransactionsModule.vue
@ -40,25 +40,13 @@ function goToSearch() {
 <template>
  <HomeModule title="Transactions">
    <template v-slot:default>
-      <PaginationControls
-        :page="transactions"
-        @update="(pr) => fetchPage(pr)"
-        class="align-right"
-      />
-      <TransactionCard
-        v-for="tx in transactions.items"
-        :key="tx.id"
-        :tx="tx"
-      />
+      <PaginationControls :page="transactions" @update="(pr) => fetchPage(pr)" class="align-right" />
+      <TransactionCard v-for="tx in transactions.items" :key="tx.id" :tx="tx" />
      <p v-if="transactions.totalElements === 0">You haven't added any transactions.</p>
    </template>
    <template v-slot:actions>
-      <AppButton
-        icon="plus"
-        @click="router.push(`/profiles/${getSelectedProfile(route)}/add-transaction`)"
-      >
-        Add Transaction</AppButton
-      >
+      <AppButton icon="plus" @click="router.push(`/profiles/${getSelectedProfile(route)}/add-transaction`)">
+        Add Transaction</AppButton>
      <AppButton @click="goToSearch()">Search</AppButton>
    </template>
  </HomeModule>