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/TreasuryPayrollView.vue

@@ -18,6 +18,7 @@ import {
   Select as ASelect,
   Space as ASpace,
   Table as ATable,
+  List as AList,
   Textarea as ATextarea,
   Tooltip as ATooltip,
   Typography,
@@ -49,6 +50,7 @@ const { useToken } = theme;
 const { token } = useToken();
 const screens = Grid.useBreakpoint();
 const isMobile = computed(() => !screens.value.md);
+const AListItem = AList.Item;
 
 type PayrollPayment = {
   id: string;
@@ -651,8 +653,24 @@ onMounted(() => {
         </a-space>
       </a-form>
 
+      <a-list v-if="isMobile && selectedPay?.payments.length" :data-source="selectedPay.payments">
+        <template #renderItem="{ item }">
+          <a-list-item>
+            <a-card style="width: 100%">
+              <a-descriptions :column="1" bordered>
+                <a-descriptions-item label="تاریخ">
+                  {{ formatJalaliNumeric(new Date(item.occurredAt)) }}
+                </a-descriptions-item>
+                <a-descriptions-item label="حساب">{{ item.accountName }}</a-descriptions-item>
+                <a-descriptions-item label="مبلغ">{{ toman(item.amount) }}</a-descriptions-item>
+              </a-descriptions>
+              <a-button type="link" @click="startEditPayment(item)">ویرایش</a-button>
+            </a-card>
+          </a-list-item>
+        </template>
+      </a-list>
       <a-table
-        v-if="selectedPay?.payments.length"
+        v-else-if="selectedPay?.payments.length"
         :columns="paymentColumns"
         :data-source="selectedPay.payments"
         :pagination="false"