Add payment categories with emoji icons and image upload support

- Add comprehensive category system: Groceries 🛒, Shopping 🛍️, Travel 🚆, Restaurant 🍽️, Utilities ⚡, Fun 🎉
- Create category utility functions with emoji and display name helpers
- Update Payment model and API validation to support categories
- Add category selectors to payment creation and edit forms
- Display category emojis prominently across all UI components:
  - Dashboard recent activities with category icons and names
  - Payment cards showing category in metadata
  - Payment modals and view pages with category information
- Add image upload/removal functionality to payment edit form
- Maintain responsive design and consistent styling across all components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/lib/utils/categories.ts

@@ -0,0 +1,49 @@
+export const PAYMENT_CATEGORIES = {
+  groceries: {
+    name: 'Groceries',
+    emoji: '🛒'
+  },
+  shopping: {
+    name: 'Shopping', 
+    emoji: '🛍️'
+  },
+  travel: {
+    name: 'Travel',
+    emoji: '🚆'
+  },
+  restaurant: {
+    name: 'Restaurant',
+    emoji: '🍽️'
+  },
+  utilities: {
+    name: 'Utilities',
+    emoji: '⚡'
+  },
+  fun: {
+    name: 'Fun',
+    emoji: '🎉'
+  }
+} as const;
+
+export type PaymentCategory = keyof typeof PAYMENT_CATEGORIES;
+
+export function getCategoryInfo(category: PaymentCategory) {
+  return PAYMENT_CATEGORIES[category] || PAYMENT_CATEGORIES.groceries;
+}
+
+export function getCategoryEmoji(category: PaymentCategory) {
+  return getCategoryInfo(category).emoji;
+}
+
+export function getCategoryName(category: PaymentCategory) {
+  return getCategoryInfo(category).name;
+}
+
+export function getCategoryOptions() {
+  return Object.entries(PAYMENT_CATEGORIES).map(([key, value]) => ({
+    value: key as PaymentCategory,
+    label: `${value.emoji} ${value.name}`,
+    emoji: value.emoji,
+    name: value.name
+  }));
+}