Merge pull request #314 from letehaha/fix/ui-issues

fix: UI issues

src/components/dialogs/manage-transaction/components/mark-as-refund/mark-as-refund-dialog.vue

@@ -76,9 +76,7 @@ const saveState = () => {
       <Dialog.DialogTrigger as-child>
         <Button class="w-full" :disabled="disabled" variant="secondary"> Link refund </Button>
       </Dialog.DialogTrigger>
-      <Dialog.DialogContent
-        class="sm:max-w-md max-h-[90dvh] grid-rows-[auto_auto_minmax(0,1fr)_auto]"
-      >
+      <Dialog.DialogContent class="max-h-[90dvh] grid grid-rows-[auto_auto_minmax(0,1fr)_auto]">
         <Dialog.DialogHeader class="mb-4">
           <Dialog.DialogTitle>Select transaction</Dialog.DialogTitle>
           <Dialog.DialogDescription>

src/components/dialogs/manage-transaction/components/mark-as-refund/refund-records-list.vue

@@ -109,7 +109,7 @@ const handlerRecordClick = (transaction: TransactionModel) => {
 </script>
 
 <template>
-  <div class="grid gap-2 grid-rows-[minmax(0,1fr)_max-content]">
+  <div class="flex flex-col flex-grow min-h-0 gap-2">
     <div class="flex">
       <Dialog.Dialog v-model:open="isFiltersDialogOpen">
         <Dialog.DialogTrigger as-child>

src/components/dialogs/manage-transaction/dialog-content.vue

@@ -35,6 +35,7 @@ import { Button } from "@/components/lib/ui/button";
 import TransactionRecrod from "@/components/transactions-list/transaction-record.vue";
 import { ApiErrorResponseError } from "@/js/errors";
 import { useNotificationCenter } from "@/components/notification-center";
+import { getInvalidationQueryKey } from "@/composable/data-queries/opposite-tx-record";
 import TypeSelector from "./components/type-selector.vue";
 import FormRow from "./components/form-row.vue";
 import AccountField from "./components/account-field.vue";
@@ -260,6 +261,14 @@ const submit = async () => {
     closeModal();
     // Reload all cached data in the app
     queryClient.invalidateQueries({ queryKey: [VUE_QUERY_TX_CHANGE_QUERY] });
+    if (props.transaction?.id) {
+      queryClient.invalidateQueries({ queryKey: getInvalidationQueryKey(props.transaction.id) });
+    }
+    if (props.oppositeTransaction?.id) {
+      queryClient.invalidateQueries({
+        queryKey: getInvalidationQueryKey(props.oppositeTransaction.id),
+      });
+    }
   } catch (e) {
     if (e instanceof ApiErrorResponseError) {
       addErrorNotification(e.data.message);
@@ -363,7 +372,7 @@ onUnmounted(() => {
         <Button variant="ghost"> Close </Button>
       </DialogClose>
     </div>
-    <div class="grid grid-cols-[450px,1fr] relative">
+    <div class="grid grid-cols-[450px,minmax(0,1fr)] relative">
       <div class="px-6">
         <type-selector
           :is-form-creation="isFormCreation"

src/components/dialogs/manage-transaction/index.vue

@@ -12,7 +12,7 @@ const isOpen = ref(false);
     <Dialog.DialogTrigger as-child>
       <slot />
     </Dialog.DialogTrigger>
-    <Dialog.DialogContent custom-close class="max-h-[90dvh] w-full max-w-[800px] bg-card p-0">
+    <Dialog.DialogContent custom-close class="max-h-[90dvh] w-full max-w-[900px] bg-card p-0">
       <DialogContent @close-modal="isOpen = false" />
     </Dialog.DialogContent>
   </Dialog.Dialog>

src/components/lib/ui/button/index.ts

@@ -19,7 +19,7 @@ export const buttonVariants = cva(
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
+        icon: "size-10",
       },
     },
     defaultVariants: {

src/components/lib/ui/card/CardContent.vue

@@ -10,7 +10,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div :class="cn('p-6 pt-0', props.class)">
+  <div :class="cn('p-2 sm:p-6 pt-0 sm:pt-0', props.class)">
     <slot />
   </div>
 </template>

src/components/lib/ui/card/CardFooter.vue

@@ -10,7 +10,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div :class="cn('p-6 pt-0', props.class)">
+  <div :class="cn('p-2 sm:p-6 pt-0', props.class)">
     <slot />
   </div>
 </template>

src/components/lib/ui/card/CardHeader.vue

@@ -10,7 +10,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
+  <div :class="cn('flex flex-col space-y-1.5 py-2 px-6 sm:py-6', props.class)">
     <slot />
   </div>
 </template>

src/components/transactions-list/transaction-record.vue

@@ -1,12 +1,8 @@
 <template>
   <button
-    class="transaction-record"
+    class="py-1 px-2 rounded-md flex justify-between items-center cursor-pointer w-full gap-2 [content-visibility:auto]"
     type="button"
     aria-haspopup="true"
-    :class="{
-      'transaction-record--income': transaction.transactionType === TRANSACTION_TYPES.income,
-      'transaction-record--expense': transaction.transactionType === TRANSACTION_TYPES.expense,
-    }"
     @click="transactionEmit"
   >
     <div class="flex items-center gap-2">
@@ -21,11 +17,16 @@
           </span>
         </template>
         <template v-else>
-          <template v-if="category">
+          <div class="flex gap-2 items-center">
             <span class="text-sm tracking-wider whitespace-nowrap">
-              {{ category.name }}
+              {{ category.name || "Other" }}
             </span>
-          </template>
+            <template v-if="isRefund">
+              <div class="border rounded-sm border-primary text-xs text-white/80 px-1 py-0.5">
+                Refund
+              </div>
+            </template>
+          </div>
         </template>
         <span class="text-sm tracking-wider line-clamp-2 opacity-40">
           {{ transaction.note }}
@@ -51,28 +52,16 @@
 
 <script lang="ts" setup>
 import { format } from "date-fns";
-import { computed, reactive, ref } from "vue";
+import { computed, reactive } from "vue";
 import { storeToRefs } from "pinia";
 import { TRANSACTION_TRANSFER_NATURE, TRANSACTION_TYPES, TransactionModel } from "shared-types";
 
 import { useCategoriesStore, useAccountsStore } from "@/stores";
-import { loadTransactionsByTransferId } from "@/api/transactions";
+import { useOppositeTxRecord } from "@/composable/data-queries/opposite-tx-record";
 
 import { formatUIAmount } from "@/js/helpers";
 import CategoryCircle from "@/components/common/category-circle.vue";
 
-const setOppositeTransaction = async (transaction: TransactionModel) => {
-  const transactions = await loadTransactionsByTransferId(transaction.transferId);
-
-  return transactions.find((item) => item.id !== transaction.id);
-};
-
-const txNatureIsTransfer = (nature: TRANSACTION_TRANSFER_NATURE) =>
-  [
-    TRANSACTION_TRANSFER_NATURE.common_transfer,
-    TRANSACTION_TRANSFER_NATURE.transfer_out_wallet,
-  ].includes(nature);
-
 const props = defineProps<{
   tx: TransactionModel;
 }>();
@@ -86,16 +75,15 @@ const emit = defineEmits<{
 }>();
 
 const transaction = reactive(props.tx);
+const isTransferTransaction = computed(() =>
+  [
+    TRANSACTION_TRANSFER_NATURE.common_transfer,
+    TRANSACTION_TRANSFER_NATURE.transfer_out_wallet,
+  ].includes(transaction.transferNature),
+);
+const isRefund = computed(() => transaction.refundLinked);
 
-const isTransferTransaction = computed(() => txNatureIsTransfer(transaction.transferNature));
-
-const oppositeTransferTransaction = ref<TransactionModel | null>(null);
-
-if (transaction.transferNature === TRANSACTION_TRANSFER_NATURE.common_transfer) {
-  (async () => {
-    oppositeTransferTransaction.value = await setOppositeTransaction(transaction);
-  })();
-}
+const { oppositeTransferTransaction } = useOppositeTxRecord(transaction);
 
 const category = computed(() => categoriesMap.value[transaction.categoryId]);
 const accountFrom = computed(() => accountsRecord.value[transaction.accountId]);
@@ -131,17 +119,8 @@ const formattedAmount = computed(() => {
 });
 </script>
 
-<style lang="scss">
-.transaction-record {
-  @apply py-1 px-2;
-  @apply rounded-md flex justify-between items-center cursor-pointer w-full gap-2;
+<script lang="ts">
+export function invalidateTxsByTransferIdQuery(id: string) {
+  return ["transactions-by-transfer-id", id];
 }
-.transaction-record__amount {
-  .transaction-record--income & {
-    @apply text-app-income-color;
-  }
-  .transaction-record--expense & {
-    @apply text-app-expense-color;
-  }
-}
-</style>
+</script>

src/components/transactions-list/transactions-list.vue

@@ -2,11 +2,11 @@
   <Dialog.Dialog v-model:open="isDialogVisible">
     <div v-bind="$attrs" class="transactions-list">
       <template v-for="item in transactions" :key="`${item.id}-render-id-${renderId}`">
-        <TransactionRecrod :tx="item" @record-click="handlerRecordClick" />
+        <TransactionRecord :tx="item" @record-click="handlerRecordClick" />
       </template>
     </div>
 
-    <Dialog.DialogContent custom-close class="max-h-[90dvh] w-full max-w-[800px] bg-card p-0">
+    <Dialog.DialogContent custom-close class="max-h-[90dvh] w-full max-w-[900px] bg-card p-0">
       <ManageTransactionDoalogContent v-bind="dialogProps" @close-modal="isDialogVisible = false" />
     </Dialog.DialogContent>
   </Dialog.Dialog>
@@ -21,7 +21,7 @@ import {
   TRANSACTION_TRANSFER_NATURE,
 } from "shared-types";
 import * as Dialog from "@/components/lib/ui/dialog";
-import TransactionRecrod from "./transaction-record.vue";
+import TransactionRecord from "./transaction-record.vue";
 
 const ManageTransactionDoalogContent = defineAsyncComponent(
   () => import("@/components/dialogs/manage-transaction/dialog-content.vue"),

src/composable/data-queries/opposite-tx-record.ts

@@ -0,0 +1,32 @@
+import { useQuery } from "@tanstack/vue-query";
+import { computed } from "vue";
+import { TRANSACTION_TRANSFER_NATURE } from "shared-types";
+import { loadTransactionsByTransferId } from "@/api/transactions";
+
+const BASE_QUERY_KEY = "transactions-by-transfer-id";
+
+export function useOppositeTxRecord(transaction) {
+  const isTransferTransaction = computed(() =>
+    [
+      TRANSACTION_TRANSFER_NATURE.common_transfer,
+      TRANSACTION_TRANSFER_NATURE.transfer_out_wallet,
+    ].includes(transaction.transferNature),
+  );
+
+  const { data: oppositeTransferTransaction } = useQuery({
+    queryKey: [BASE_QUERY_KEY, transaction.id, transaction.transferId],
+    queryFn: async () => {
+      const transactions = await loadTransactionsByTransferId(transaction.transferId);
+      if (!transactions) return null;
+      return transactions.find((item) => item.id !== transaction.id) || null;
+    },
+    enabled: isTransferTransaction.value,
+    staleTime: Infinity,
+  });
+
+  return {
+    oppositeTransferTransaction,
+  };
+}
+
+export const getInvalidationQueryKey = (transactionId) => [BASE_QUERY_KEY, transactionId];

src/pages/dashboard/accounts-list/account-card.vue

@@ -1,6 +1,6 @@
 <template>
   <Card>
-    <CardContent class="p-4">
+    <CardContent class="!p-4">
       <div class="account__name">
         {{ account.name || "No name set..." }}
       </div>