refactor: centralize category logic in useCategories composable

Author: Frederick-S

src/App.vue

@@ -58,21 +58,22 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
 import { useSupabase } from './composables/useSupabase'
-import Auth from './components/Auth.vue'
 import AppHeader from './components/AppHeader.vue'
+import Auth from './components/Auth.vue'
 import TodaySummary from './components/TodaySummary.vue'
+import ExpenseForm from './components/ExpenseForm.vue'
 import ExpenseList from './components/ExpenseList.vue'
 import ChartsView from './components/ChartsView.vue'
 import BottomNavigation from './components/BottomNavigation.vue'
-import ExpenseForm from './components/ExpenseForm.vue'
 import PasswordChange from './components/PasswordChange.vue'
+import { type CategoryKey } from './composables/useCategories'
 
 interface Expense {
   id: string
   amount: number
-  category: string
+  category: CategoryKey
   date: string
   note: string
   user_id?: string

src/components/ExpenseForm.vue

@@ -74,12 +74,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, defineProps, defineEmits } from 'vue'
+import { useSupabase } from '../composables/useSupabase'
+import { useCategories, type CategoryKey } from '../composables/useCategories'
 
 interface Expense {
   id: string
   amount: number
-  category: string
+  category: CategoryKey
   date: string
   note?: string
 }
@@ -98,33 +100,30 @@ interface Emits {
 const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
+const { supabase } = useSupabase()
+const { CATEGORY_OPTIONS } = useCategories()
+
 const showForm = ref(props.modelValue)
 const amount = ref('')
-const category = ref('Food')
+const category = ref<CategoryKey>('Food')
 const note = ref('')
 
-const categoryOptions = [
-  { text: '餐饮', value: 'Food' },
-  { text: '交通', value: 'Transport' },
-  { text: '购物', value: 'Shopping' },
-  { text: '娱乐', value: 'Entertainment' },
-  { text: '其他', value: 'Other' }
-]
+const categoryOptions = CATEGORY_OPTIONS
 
 watch(() => props.modelValue, (newValue) => {
   showForm.value = newValue
   if (newValue && props.expense) {
     // Populate form with existing expense data
     amount.value = props.expense.amount.toString()
-    category.value = props.expense.category
+    category.value = props.expense.category as CategoryKey
     note.value = props.expense.note || ''
   }
 })
 
 watch(() => props.expense, (newExpense) => {
   if (newExpense) {
     amount.value = newExpense.amount.toString()
-    category.value = newExpense.category
+    category.value = newExpense.category as CategoryKey
     note.value = newExpense.note || ''
   }
 })

src/components/ExpenseList.vue

@@ -26,7 +26,7 @@
                   size="small"
                   variant="flat"
                 >
-                  {{ categoryNames[expense.category] }}
+                  {{ getCategoryName(expense.category) }}
                 </v-chip>
                 <span class="text-caption text-medium-emphasis">
                   {{ new Date(expense.date).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }) }}
@@ -57,11 +57,12 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useCategories, type CategoryKey } from '../composables/useCategories'
 
 interface Expense {
   id: string
   amount: number
-  category: string
+  category: CategoryKey
   date: string
   note?: string
 }
@@ -77,24 +78,7 @@ interface Emits {
 const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
-const categoryNames: Record<string, string> = {
-  Food: '餐饮',
-  Transport: '交通',
-  Shopping: '购物',
-  Entertainment: '娱乐',
-  Other: '其他'
-}
-
-const getCategoryColor = (category: string) => {
-  const colors: Record<string, string> = {
-    Food: 'orange',
-    Transport: 'blue',
-    Shopping: 'pink',
-    Entertainment: 'purple',
-    Other: 'grey'
-  }
-  return colors[category] || 'grey'
-}
+const { getCategoryName, getCategoryColor } = useCategories()
 
 const formatAmount = (amount: number) => {
   return new Intl.NumberFormat('zh-CN', {

src/components/TodaySummary.vue

@@ -11,11 +11,12 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { type CategoryKey } from '../composables/useCategories'
 
 interface Expense {
   id: string
   amount: number
-  category: string
+  category: CategoryKey
   date: string
   note?: string
 }

src/components/charts/CategoryChart.vue

@@ -22,13 +22,14 @@ import {
   Legend,
   DoughnutController
 } from 'chart.js'
+import { useCategories, type CategoryKey } from '../../composables/useCategories'
 
 Chart.register(ArcElement, Title, Tooltip, Legend, DoughnutController)
 
 interface Expense {
   id: string
   amount: number
-  category: string
+  category: CategoryKey
   date: string
   note?: string
 }
@@ -41,13 +42,7 @@ const props = defineProps<Props>()
 const chartRef = ref<HTMLCanvasElement>()
 let chart: Chart | null = null
 
-const categoryNames: Record<string, string> = {
-  Food: '餐饮',
-  Transport: '交通',
-  Shopping: '购物',
-  Entertainment: '娱乐',
-  Other: '其他'
-}
+const { getCategoryName, getCategoryChartColor } = useCategories()
 
 const formatAmount = (amount: number) => {
   return new Intl.NumberFormat('zh-CN', {
@@ -57,7 +52,7 @@ const formatAmount = (amount: number) => {
 }
 
 const categoryBreakdown = computed(() => {
-  const breakdown: Record<string, { amount: number; count: number; percentage: number }> = {}
+  const breakdown: Record<CategoryKey, { amount: number; count: number; percentage: number }> = {} as any
   
   props.expenses.forEach(expense => {
     if (!breakdown[expense.category]) {
@@ -69,14 +64,16 @@ const categoryBreakdown = computed(() => {
   
   const total = props.expenses.reduce((sum, exp) => sum + exp.amount, 0)
   Object.keys(breakdown).forEach(category => {
-    breakdown[category].percentage = total > 0 ? (breakdown[category].amount / total) * 100 : 0
+    const cat = category as CategoryKey
+    breakdown[cat].percentage = total > 0 ? (breakdown[cat].amount / total) * 100 : 0
   })
   
-  const sortedBreakdown: Record<string, any> = {}
+  // Sort by amount descending
+  const sortedBreakdown: Record<CategoryKey, any> = {} as any
   Object.entries(breakdown)
     .sort(([,a], [,b]) => b.amount - a.amount)
     .forEach(([category, data]) => {
-      sortedBreakdown[category] = data
+      sortedBreakdown[category as CategoryKey] = data
     })
   
   return sortedBreakdown
@@ -87,18 +84,18 @@ const total = computed(() => props.expenses.reduce((sum, exp) => sum + exp.amoun
 const createChart = () => {
   if (!chartRef.value) return
   
-  const categories = Object.keys(categoryBreakdown.value)
+  const categories = Object.keys(categoryBreakdown.value) as CategoryKey[]
   const amounts = categories.map(cat => categoryBreakdown.value[cat].amount)
-  const colors = categories.map(cat => {
-    const colorMap: Record<string, string> = {
-      Food: '#FF9800',
-      Transport: '#2196F3', 
-      Shopping: '#E91E63',
-      Entertainment: '#9C27B0',
-      Other: '#607D8B'
+  const colors = categories.map(cat => getCategoryChartColor(cat))
+  
+  // Don't create chart if no data
+  if (categories.length === 0 || amounts.every(amount => amount === 0)) {
+    if (chart) {
+      chart.destroy()
+      chart = null
     }
-    return colorMap[cat] || '#607D8B'
-  })
+    return
+  }
   
   if (chart) {
     chart.destroy()
@@ -107,7 +104,7 @@ const createChart = () => {
   chart = new Chart(chartRef.value, {
     type: 'doughnut',
     data: {
-      labels: categories.map(cat => categoryNames[cat]),
+      labels: categories.map(cat => getCategoryName(cat)),
       datasets: [{
         data: amounts,
         backgroundColor: colors,

src/components/charts/CategoryDetails.vue

@@ -13,7 +13,7 @@
         >
           <template v-slot:prepend>
             <v-avatar
-              :color="getCategoryColor(category)"
+              :color="getCategoryColor(category as CategoryKey)"
               size="small"
               class="mr-3"
             >
@@ -24,7 +24,7 @@
           </template>
 
           <v-list-item-title class="font-weight-medium">
-            {{ categoryNames[category] }}
+            {{ getCategoryName(category as CategoryKey) }}
           </v-list-item-title>
 
           <template v-slot:append>
@@ -41,11 +41,12 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useCategories, type CategoryKey } from '../../composables/useCategories'
 
 interface Expense {
   id: string
   amount: number
-  category: string
+  category: CategoryKey
   date: string
   note?: string
 }
@@ -56,24 +57,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const categoryNames: Record<string, string> = {
-  Food: '餐饮',
-  Transport: '交通',
-  Shopping: '购物',
-  Entertainment: '娱乐',
-  Other: '其他'
-}
-
-const getCategoryColor = (category: string) => {
-  const colors: Record<string, string> = {
-    Food: 'orange',
-    Transport: 'blue',
-    Shopping: 'pink',
-    Entertainment: 'purple',
-    Other: 'grey'
-  }
-  return colors[category] || 'grey'
-}
+const { getCategoryName, getCategoryColor } = useCategories()
 
 const formatAmount = (amount: number) => {
   return new Intl.NumberFormat('zh-CN', {
@@ -83,7 +67,7 @@ const formatAmount = (amount: number) => {
 }
 
 const categoryBreakdown = computed(() => {
-  const breakdown: Record<string, { amount: number; count: number; percentage: number }> = {}
+  const breakdown: Record<CategoryKey, { amount: number; count: number; percentage: number }> = {} as any
   
   props.expenses.forEach(expense => {
     if (!breakdown[expense.category]) {
@@ -95,14 +79,16 @@ const categoryBreakdown = computed(() => {
   
   const total = props.expenses.reduce((sum, exp) => sum + exp.amount, 0)
   Object.keys(breakdown).forEach(category => {
-    breakdown[category].percentage = total > 0 ? (breakdown[category].amount / total) * 100 : 0
+    const cat = category as CategoryKey
+    breakdown[cat].percentage = total > 0 ? (breakdown[cat].amount / total) * 100 : 0
   })
   
-  const sortedBreakdown: Record<string, any> = {}
+  // Sort by amount descending
+  const sortedBreakdown: Record<CategoryKey, any> = {} as any
   Object.entries(breakdown)
     .sort(([,a], [,b]) => b.amount - a.amount)
     .forEach(([category, data]) => {
-      sortedBreakdown[category] = data
+      sortedBreakdown[category as CategoryKey] = data
     })
   
   return sortedBreakdown

src/components/charts/PeriodFilter.vue

@@ -42,11 +42,12 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { type CategoryKey } from '../../composables/useCategories'
 
 interface Expense {
   id: string
   amount: number
-  category: string
+  category: CategoryKey
   date: string
   note?: string
 }

src/components/charts/TrendChart.vue

@@ -24,13 +24,14 @@ import {
   Tooltip,
   LineController
 } from 'chart.js'
+import { type CategoryKey } from '../../composables/useCategories'
 
 Chart.register(CategoryScale, LinearScale, LineElement, PointElement, Title, Tooltip, LineController)
 
 interface Expense {
   id: string
   amount: number
-  category: string
+  category: CategoryKey
   date: string
   note?: string
 }