feat(treasury): separate receipts from income and fit finance on a phone

A receipt or payment only reduces the party balance, while an income or expense keeps both amounts. Finance screens stack into cards on a phone so the forms and lists stay readable.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/views/treasury/TreasuryHomeView.vue

@@ -15,8 +15,10 @@ import {
 import { api } from '@/lib/api';
 import type { TreasuryDashboardDto } from '@mento/shared';
 import { toman } from './treasury-format';
+import { useTreasuryMobile } from './useTreasuryMobile';
 
 const { Text: ATypographyText } = Typography;
+const isMobile = useTreasuryMobile();
 const AListItem = AList.Item;
 const AListItemMeta = AList.Item.Meta;
 
@@ -75,7 +77,7 @@ onMounted(async () => {
               />
               <a-list
                 v-else
-                item-layout="horizontal"
+                :item-layout="isMobile ? 'vertical' : 'horizontal'"
                 :data-source="data.upcomingInstallments"
               >
                 <template #renderItem="{ item }">
@@ -102,7 +104,7 @@ onMounted(async () => {
               />
               <a-list
                 v-else
-                item-layout="horizontal"
+                :item-layout="isMobile ? 'vertical' : 'horizontal'"
                 :data-source="data.upcomingPayables"
               >
                 <template #renderItem="{ item }">
@@ -127,7 +129,7 @@ onMounted(async () => {
           />
           <a-list
             v-else
-            item-layout="horizontal"
+            :item-layout="isMobile ? 'vertical' : 'horizontal'"
             :data-source="data.recent"
           >
             <template #renderItem="{ item }">