Show jalali clock columns on desktop and pastel debtor/creditor asset boxes.

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

apps/web/src/components/person-assets/PersonAssetsPanel.vue

@@ -5,6 +5,8 @@ import { api } from '@/lib/api';
 import { formatMoney } from '@/lib/money';
 import {
   dateToJalali,
+  formatClockFa,
+  formatJalaliDay,
   formatLocalDateInput,
   parseLocalInput,
 } from '@/lib/jalali';
@@ -80,6 +82,14 @@ const hasMultipleConnections = computed(() => connections.value.length > 1);
 const goldBalance = computed(() => assets.value?.goldBalance ?? null);
 const rialBalance = computed(() => assets.value?.rialBalance ?? null);
 
+const fetchedAtLabel = computed(() => {
+  const raw = assets.value?.fetchedAt;
+  if (!raw) return '';
+  const d = new Date(raw);
+  if (Number.isNaN(d.getTime())) return '';
+  return `${formatJalaliDay(d)} ${formatClockFa(d)}`;
+});
+
 const mandehGroups = computed(() => {
   const items = assets.value?.mandehDetail ?? [];
   const groups: Record<string, typeof items> = {
@@ -105,9 +115,9 @@ const mandehGroups = computed(() => {
     .map(([label, list]) => ({ label, items: list }));
 });
 
-function balanceClass(v: number | null) {
-  if (v == null || v === 0) return '';
-  return v > 0 ? 'credit' : 'debt';
+function balanceTone(v: number | null) {
+  if (v == null || v === 0) return 'tone-neutral';
+  return v > 0 ? 'tone-credit' : 'tone-debt';
 }
 
 function balanceLabel(v: number | null) {
@@ -479,29 +489,38 @@ onMounted(async () => {
       <template v-if="currentLink && assets">
         <section class="summary card">
           <h3>دارایی</h3>
-          <div class="balance-row">
-            <span>دارایی طلایی</span>
-            <div class="val" :class="balanceClass(goldBalance)" dir="ltr">
+          <div class="balance-grid">
+            <article class="balance-box" :class="balanceTone(goldBalance)">
+              <span>دارایی طلایی</span>
+              <strong dir="ltr">
+                {{ formatAmt(goldBalance) }}
+                <em>(گرم)</em>
+              </strong>
               <small v-if="balanceLabel(goldBalance)">{{ balanceLabel(goldBalance) }}</small>
-              {{ formatAmt(goldBalance) }}
-              <em>(گرم)</em>
-            </div>
-          </div>
-          <div class="balance-row">
-            <span>دارایی ریالی</span>
-            <div class="val" :class="balanceClass(rialBalance)" dir="ltr">
+            </article>
+            <article class="balance-box" :class="balanceTone(rialBalance)">
+              <span>دارایی ریالی</span>
+              <strong dir="ltr">
+                {{ rialBalance != null ? formatMoney(Math.abs(rialBalance), 'IRR') : '—' }}
+              </strong>
               <small v-if="balanceLabel(rialBalance)">{{ balanceLabel(rialBalance) }}</small>
-              {{ rialBalance != null ? formatMoney(Math.abs(rialBalance), 'IRR') : '—' }}
-            </div>
+            </article>
+            <article
+              v-if="assets.totalGoldEquiv != null"
+              class="balance-box"
+              :class="balanceTone(assets.totalGoldEquiv)"
+            >
+              <span>دارایی کل به طلا</span>
+              <strong dir="ltr">
+                {{ formatAmt(assets.totalGoldEquiv) }}
+                <em>(گرم)</em>
+              </strong>
+              <small v-if="balanceLabel(assets.totalGoldEquiv)">{{
+                balanceLabel(assets.totalGoldEquiv)
+              }}</small>
+            </article>
           </div>
-          <div v-if="assets.totalGoldEquiv != null" class="balance-row">
-            <span>دارایی کل به طلا</span>
-            <div class="val" :class="balanceClass(assets.totalGoldEquiv)" dir="ltr">
-              {{ formatAmt(assets.totalGoldEquiv) }}
-              <em>(گرم)</em>
-            </div>
-          </div>
-          <p class="muted tiny">آخرین دریافت: {{ assets.fetchedAt }}</p>
+          <p v-if="fetchedAtLabel" class="muted tiny">آخرین دریافت: {{ fetchedAtLabel }}</p>
         </section>
 
         <div class="tabs">
@@ -746,32 +765,68 @@ onMounted(async () => {
 .summary h3 {
   margin: 0 0 0.75rem;
 }
-.balance-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.45rem 0;
-  border-bottom: 1px dashed var(--line);
+.balance-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.65rem;
 }
-.balance-row:last-of-type {
-  border-bottom: 0;
+.balance-box {
+  display: grid;
+  gap: 0.28rem;
+  min-width: 0;
+  padding: 0.8rem 0.9rem;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
 }
-.val {
+.balance-box span {
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: #64748b;
+}
+.balance-box strong {
   display: flex;
   align-items: baseline;
-  gap: 0.35rem;
+  gap: 0.3rem;
+  font-size: 1.15rem;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+}
+.balance-box em {
+  font-style: normal;
+  font-size: 0.75rem;
+  font-weight: 600;
+  opacity: 0.7;
+}
+.balance-box small {
+  font-size: 0.75rem;
   font-weight: 700;
 }
-.val em {
-  font-style: normal;
-  font-weight: 500;
-  font-size: 0.75rem;
-  color: var(--muted);
+.balance-box.tone-debt {
+  border-color: #f5b4b4;
+  background: #fff1f2;
+  color: #9f1239;
 }
-.val small {
-  font-size: 0.7rem;
-  font-weight: 600;
+.balance-box.tone-debt span,
+.balance-box.tone-debt small {
+  color: #be123c;
+}
+.balance-box.tone-credit {
+  border-color: #86efac;
+  background: #f0fdf4;
+  color: #166534;
+}
+.balance-box.tone-credit span,
+.balance-box.tone-credit small {
+  color: #15803d;
+}
+.summary .tiny {
+  margin: 0.7rem 0 0;
+}
+@media (max-width: 640px) {
+  .balance-grid {
+    grid-template-columns: 1fr;
+  }
 }
 .credit {
   color: #15803d;