Improve percentage calculation and display formatting

Updated SQL logic to ensure minimum non-zero percentages are at least 0.01%. Enhanced CategoryDetails.vue to display percentages <1% with one decimal place, improving accuracy and clarity in UI.

Author: Frederick-S

db/rpc.sql

@@ -72,7 +72,11 @@ BEGIN
     COALESCE(SUM(e.amount), 0) as amount,
     COUNT(*)::BIGINT as count,
     CASE 
-      WHEN total_amount > 0 THEN ROUND((COALESCE(SUM(e.amount), 0) / total_amount * 100), 2)
+      WHEN total_amount > 0 THEN 
+        GREATEST(
+          ROUND((COALESCE(SUM(e.amount), 0) / total_amount * 100), 2),
+          CASE WHEN COALESCE(SUM(e.amount), 0) > 0 THEN 0.01 ELSE 0 END
+        )
       ELSE 0
     END as percentage
   FROM expenses e
@@ -315,7 +319,11 @@ BEGIN
     ct.total_amount as amount,
     ct.total_count as count,
     CASE 
-      WHEN total_amount > 0 THEN ROUND((ct.total_amount / total_amount * 100), 2)
+      WHEN total_amount > 0 THEN 
+        GREATEST(
+          ROUND((ct.total_amount / total_amount * 100), 2),
+          CASE WHEN ct.total_amount > 0 THEN 0.01 ELSE 0 END
+        )
       ELSE 0
     END as percentage,
     ct.has_children

src/components/charts/CategoryDetails.vue

@@ -18,7 +18,7 @@
               class="mr-3"
             >
               <span class="text-white text-caption font-weight-bold">
-                {{ Math.round(categoryItem.percentage) }}%
+                {{ formatPercentage(categoryItem.percentage) }}
               </span>
             </v-avatar>
           </template>
@@ -56,4 +56,13 @@ const formatAmount = (amount: number) => {
     currency: 'CNY'
   }).format(amount)
 }
+
+const formatPercentage = (percentage: number) => {
+  // For percentages >= 1%, show as integer
+  if (percentage >= 1) {
+    return `${Math.round(percentage)}%`
+  }
+  // For percentages < 1%, show 1 decimal place
+  return `${percentage.toFixed(1)}%`
+}
 </script>