From b286a0315dd5ffedb0aa4beda3752f7a8f206e4e Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 7 Nov 2025 14:35:38 +0100
Subject: [PATCH 01/32] Updates project documentation

Refines project documentation to reflect recent architectural changes and coding standards.

Adds detailed explanations of the BaseService pattern, module structure, and JavaScript best practices to enhance developer understanding and consistency.

Clarifies CSS styling guidelines, emphasizing semantic classes for theme-aware styling.

Includes critical bug prevention techniques related to JavaScript falsy values and correct usage of the nullish coalescing operator.

Updates build configuration details, environment variable requirements, and mobile browser workaround strategies.
---
 CLAUDE.md | 500 ++++++++++++++++++++----------------------------------
 1 file changed, 180 insertions(+), 320 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 6fd5d02..2ef2826 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -10,7 +10,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 - `npm run preview` - Preview production build locally
 - `npm run analyze` - Build with bundle analysis (opens visualization)
 
-**Electron Development** 
+**Electron Development**
 - `npm run electron:dev` - Run both Vite dev server and Electron concurrently
 - `npm run electron:build` - Full build and package for Electron
 - `npm run start` - Start Electron using Forge
@@ -26,7 +26,7 @@ This is a modular Vue 3 + TypeScript + Vite application with Electron support, f
 The application uses a plugin-based modular architecture with dependency injection for service management:
 
 **Core Modules:**
-- **Base Module** (`src/modules/base/`) - Core infrastructure (Nostr, Auth, PWA)
+- **Base Module** (`src/modules/base/`) - Core infrastructure (Nostr, Auth, PWA, Image Upload)
 - **Wallet Module** (`src/modules/wallet/`) - Lightning wallet management with real-time balance updates
 - **Nostr Feed Module** (`src/modules/nostr-feed/`) - Social feed functionality
 - **Chat Module** (`src/modules/chat/`) - Encrypted Nostr chat
@@ -90,6 +90,12 @@ const relayHub = injectService(SERVICE_TOKENS.RELAY_HUB)
 - `SERVICE_TOKENS.VISIBILITY_SERVICE` - App visibility and connection management
 - `SERVICE_TOKENS.WALLET_SERVICE` - Wallet operations (send, receive, transactions)
 - `SERVICE_TOKENS.WALLET_WEBSOCKET_SERVICE` - Real-time wallet balance updates via WebSocket
+- `SERVICE_TOKENS.STORAGE_SERVICE` - Local storage management
+- `SERVICE_TOKENS.TOAST_SERVICE` - Toast notification system
+- `SERVICE_TOKENS.INVOICE_SERVICE` - Lightning invoice creation and management
+- `SERVICE_TOKENS.LNBITS_API` - LNbits API client
+- `SERVICE_TOKENS.IMAGE_UPLOAD_SERVICE` - Image upload to pictrs server
+- `SERVICE_TOKENS.NOSTR_METADATA_SERVICE` - Nostr user metadata (NIP-01 kind 0)
 
 **Core Stack:**
 - Vue 3 with Composition API (`<script setup>` style)
@@ -122,6 +128,8 @@ const relayHub = injectService(SERVICE_TOKENS.RELAY_HUB)
   - `api/` - API integrations
   - `types/` - TypeScript type definitions
 - `src/pages/` - Route pages
+- `src/modules/` - Modular feature implementations
+- `src/core/` - Core infrastructure (DI, BaseService, plugin manager)
 - `electron/` - Electron main process code
 
 **Lightning Wallet Integration:**
@@ -143,8 +151,10 @@ The app integrates with LNbits for Lightning Network wallet functionality with r
 ```typescript
 websocket: {
   enabled: true,           // Enable/disable WebSocket functionality
-  reconnectDelay: 1000,    // Initial reconnection delay
-  maxReconnectAttempts: 5  // Maximum reconnection attempts
+  reconnectDelay: 2000,    // Initial reconnection delay (ms)
+  maxReconnectAttempts: 3, // Maximum reconnection attempts
+  fallbackToPolling: true, // Enable polling fallback when WebSocket fails
+  pollingInterval: 10000   // Polling interval (ms)
 }
 ```
 
@@ -184,12 +194,12 @@ export const myModule: ModulePlugin = {
   name: 'my-module',
   version: '1.0.0',
   dependencies: ['base'], // Always depend on base for core services
-  
+
   async install(app: App, options?: { config?: MyModuleConfig }) {
     // Module installation logic
     // Register components, initialize services, etc.
   },
-  
+
   routes: [/* module routes */],
   components: {/* exported components */},
   composables: {/* exported composables */}
@@ -229,6 +239,88 @@ export const myModule: ModulePlugin = {
 - Module configs in `src/app.config.ts`
 - Centralized config parsing and validation
 
+### **BaseService Pattern**
+
+All services MUST extend `BaseService` (`src/core/base/BaseService.ts`) for standardized initialization and dependency management:
+
+**Service Implementation Pattern:**
+
+```typescript
+import { BaseService } from '@/core/base/BaseService'
+
+export class MyService extends BaseService {
+  // 1. REQUIRED: Declare metadata with dependencies
+  protected readonly metadata = {
+    name: 'MyService',
+    version: '1.0.0',
+    dependencies: ['AuthService', 'RelayHub', 'VisibilityService']
+  }
+
+  // 2. REQUIRED: Implement onInitialize
+  protected async onInitialize(): Promise<void> {
+    // Dependencies are auto-injected based on metadata.dependencies
+    // Available: this.authService, this.relayHub, this.visibilityService, etc.
+
+    // Register with VisibilityService if using WebSockets
+    if (this.visibilityService) {
+      this.visibilityService.registerService(
+        this.metadata.name,
+        this.onResume.bind(this),
+        this.onPause.bind(this)
+      )
+    }
+
+    // Your initialization logic
+    await this.setupConnections()
+  }
+
+  // 3. Implement visibility handlers for WebSocket services
+  private async onResume(): Promise<void> {
+    // Reconnect and restore state when app becomes visible
+  }
+
+  private async onPause(): Promise<void> {
+    // Pause operations when app loses visibility
+  }
+
+  // 4. Optional: Cleanup logic
+  protected async onDispose(): Promise<void> {
+    // Cleanup connections, subscriptions, etc.
+  }
+}
+```
+
+**BaseService Features:**
+- **Automatic dependency injection** based on `metadata.dependencies`
+- **Retry logic** with configurable retries and delays
+- **Reactive state** via `isInitialized`, `isInitializing`, `initError`
+- **Event emission** for service lifecycle events
+- **Error handling** with consistent logging
+- **Debug helpers** for development
+
+**Service Initialization:**
+```typescript
+// In module's index.ts
+const myService = new MyService()
+container.provide(SERVICE_TOKENS.MY_SERVICE, myService)
+
+// Initialize with options
+await myService.initialize({
+  waitForDependencies: true,  // Wait for dependencies before initializing
+  maxRetries: 3,              // Retry on failure
+  retryDelay: 1000           // Delay between retries (ms)
+})
+```
+
+**Available Dependencies:**
+When you list these in `metadata.dependencies`, they'll be auto-injected:
+- `'RelayHub'` → `this.relayHub`
+- `'AuthService'` → `this.authService`
+- `'VisibilityService'` → `this.visibilityService`
+- `'StorageService'` → `this.storageService`
+- `'ToastService'` → `this.toastService`
+- `'LnbitsAPI'` → `this.lnbitsAPI`
+
 ### **Form Implementation Standards**
 
 **CRITICAL: Always use Shadcn/UI Form Components with vee-validate**
@@ -289,7 +381,7 @@ const onSubmit = form.handleSubmit(async (values) => {
       <FormItem>
         <FormLabel>Name *</FormLabel>
         <FormControl>
-          <Input 
+          <Input
             placeholder="Enter name"
             v-bind="componentField"
           />
@@ -330,7 +422,7 @@ const onSubmit = form.handleSubmit(async (values) => {
     </FormField>
 
     <!-- Submit Button -->
-    <Button 
+    <Button
       type="submit"
       :disabled="isLoading || !isFormValid"
     >
@@ -382,35 +474,44 @@ For Shadcn/ui Checkbox components, you MUST use the correct Vue.js binding patte
 - ✅ **Force Re-render**: Use dynamic `:key` if checkbox doesn't reflect initial form values
 - ❌ **Don't Mix**: Never mix checked/model-value patterns - they have different behaviors
 
-**Reference**: [Vue.js Forms Documentation](https://vuejs.org/guide/essentials/forms.html)
+### **CSS and Styling Guidelines**
 
-**❌ NEVER do this:**
-```vue
-<!-- Wrong: Manual form handling without vee-validate -->
-<form @submit.prevent="handleSubmit">
-  
-<!-- Wrong: Direct v-model bypasses form validation -->
-<Input v-model="myValue" />
+**CRITICAL: Always use semantic, theme-aware CSS classes**
 
-<!-- Wrong: Manual validation instead of using meta.valid -->
-<Button :disabled="!name || !email">Submit</Button>
+- ✅ **Use semantic classes** that automatically adapt to light/dark themes
+- ❌ **Never use hard-coded colors** like `bg-white`, `text-gray-500`, `border-blue-500`
+
+**Preferred Semantic Classes:**
+```css
+/* Background Colors */
+bg-background      /* Instead of bg-white */
+bg-card           /* Instead of bg-gray-50 */
+bg-muted          /* Instead of bg-gray-100 */
+
+/* Text Colors */
+text-foreground          /* Instead of text-gray-900 */
+text-muted-foreground    /* Instead of text-gray-600 */
+text-primary             /* For primary theme color */
+text-accent              /* For accent theme color */
+
+/* Borders */
+border-border     /* Instead of border-gray-200 */
+border-input      /* Instead of border-gray-300 */
+
+/* Focus States */
+focus:ring-ring         /* Instead of focus:ring-blue-500 */
+focus:border-ring       /* Instead of focus:border-blue-500 */
+
+/* Opacity Modifiers */
+bg-primary/10                /* For subtle variations */
+text-muted-foreground/70     /* For transparency */
 ```
 
-**✅ ALWAYS do this:**
-```vue
-<!-- Correct: Uses form.handleSubmit for proper form handling -->
-<form @submit="onSubmit">
-  
-<!-- Correct: Uses FormField with componentField binding -->
-<FormField v-slot="{ componentField }" name="fieldName">
-  <FormControl>
-    <Input v-bind="componentField" />
-  </FormControl>
-</FormField>
-
-<!-- Correct: Uses form meta for validation state -->
-<Button :disabled="!isFormValid">Submit</Button>
-```
+**Why Semantic Classes:**
+- Ensures components work in both light and dark themes
+- Maintains consistency with Shadcn/ui component library
+- Easier to maintain and update theme colors globally
+- Better accessibility
 
 ### **Vue Reactivity Best Practices**
 
@@ -463,23 +564,32 @@ createdObject.value = Object.assign({}, apiResponse)
 - ✅ Input components showing external data
 - ✅ Any scenario where template doesn't update after data changes
 
-**Example from Wallet Module:**
+### **⚠️ CRITICAL: JavaScript Falsy Value Bug Prevention**
+
+**ALWAYS use nullish coalescing (`??`) instead of logical OR (`||`) for numeric defaults:**
+
 ```typescript
-// Service returns complex invoice object
-const invoice = await walletService.createInvoice(data)
+// ❌ WRONG: Treats 0 as falsy, defaults to 1 even when quantity is validly 0
+quantity: productData.quantity || 1
 
-// Force reactivity for template updates
-createdInvoice.value = Object.assign({}, invoice)
+// ✅ CORRECT: Only defaults to 1 when quantity is null or undefined
+quantity: productData.quantity ?? 1
 ```
 
-```vue
-<!-- Template with forced reactivity -->
-<Input
-  :key="`bolt11-${createdInvoice?.payment_hash}`"
-  :model-value="createdInvoice?.payment_request || ''"
-  readonly
-/>
-```
+**Why this matters:**
+- JavaScript falsy values include: `false`, `0`, `""`, `null`, `undefined`, `NaN`
+- Using `||` for defaults will incorrectly override valid `0` values
+- This caused a critical bug where products with quantity `0` displayed as quantity `1`
+- The `??` operator only triggers for `null` and `undefined`, preserving valid `0` values
+
+**Common scenarios where this bug occurs:**
+- Product quantities, prices, counters (any numeric value where 0 is valid)
+- Boolean flags where `false` is a valid state
+- Empty strings that should be preserved vs. undefined strings
+
+**Rule of thumb:**
+- Use `||` only when `0`, `false`, or `""` should trigger the default
+- Use `??` when only `null`/`undefined` should trigger the default (most cases)
 
 ### **Module Development Best Practices**
 
@@ -530,166 +640,6 @@ Before considering any module complete, verify ALL items:
 - [ ] Configuration is properly loaded
 - [ ] Module can be disabled via config
 
-**Required Module Structure:**
-```
-src/modules/[module-name]/
-├── index.ts                 # Module plugin definition (REQUIRED)
-├── components/              # Module-specific components
-├── composables/             # Module composables (use DI for services)
-├── services/                # Module services (extend BaseService)
-│   ├── [module]Service.ts  # Core module service
-│   └── [module]API.ts       # LNbits API integration
-├── stores/                  # Module-specific Pinia stores
-├── types/                   # Module type definitions
-└── views/                   # Module pages/views
-```
-
-**Service Implementation Pattern:**
-
-**⚠️ CRITICAL SERVICE REQUIREMENTS - MUST FOLLOW EXACTLY:**
-
-```typescript
-// ✅ CORRECT: Proper BaseService implementation
-export class MyModuleService extends BaseService {
-  // 1. REQUIRED: Declare metadata with dependencies
-  protected readonly metadata = {
-    name: 'MyModuleService',
-    version: '1.0.0',
-    dependencies: ['PaymentService', 'AuthService'] // List ALL service dependencies by name
-  }
-
-  // 2. REQUIRED: DO NOT manually inject services in onInitialize
-  protected async onInitialize(): Promise<void> {
-    // ❌ WRONG: Manual injection
-    // this.paymentService = injectService(SERVICE_TOKENS.PAYMENT_SERVICE)
-
-    // ✅ CORRECT: BaseService auto-injects based on metadata.dependencies
-    // this.paymentService is already available here!
-
-    // 3. REQUIRED: Register with VisibilityService if you have ANY real-time features
-    if (this.hasRealTimeFeatures()) {
-      this.visibilityService.registerService(
-        this.metadata.name,
-        this.onResume.bind(this),
-        this.onPause.bind(this)
-      )
-    }
-
-    // 4. Initialize your module-specific logic
-    await this.loadInitialData()
-  }
-
-  // 5. REQUIRED: Implement visibility handlers for connection management
-  private async onResume(): Promise<void> {
-    // Restore connections, refresh data when app becomes visible
-    await this.checkConnectionHealth()
-    await this.refreshData()
-  }
-
-  private async onPause(): Promise<void> {
-    // Pause expensive operations for battery efficiency
-    this.pausePolling()
-  }
-
-  private hasRealTimeFeatures(): boolean {
-    // Return true if your service uses WebSockets, polling, or real-time updates
-    return true
-  }
-}
-
-// API services for LNbits integration
-export class MyModuleAPI extends BaseService {
-  private baseUrl: string
-
-  constructor() {
-    super()
-    // ❌ WRONG: Direct config import
-    // import { config } from '@/lib/config'
-
-    // ✅ CORRECT: Use module configuration
-    const moduleConfig = appConfig.modules.myModule.config
-    this.baseUrl = moduleConfig.apiConfig.baseUrl
-  }
-
-  // API methods here
-}
-```
-
-**❌ COMMON MISTAKES TO AVOID:**
-1. **Manual service injection** in onInitialize - BaseService handles this
-2. **Direct config imports** - Always use module configuration
-3. **Missing metadata.dependencies** - Breaks automatic dependency injection
-4. **No VisibilityService integration** - Causes connection issues on mobile
-5. **Not using proper initialization options** - Miss dependency waiting
-
-**Module Plugin Pattern:**
-
-**⚠️ CRITICAL MODULE INSTALLATION REQUIREMENTS:**
-
-```typescript
-export const myModule: ModulePlugin = {
-  name: 'my-module',
-  version: '1.0.0',
-  dependencies: ['base'], // ALWAYS depend on 'base' for core infrastructure
-
-  async install(app: App, options?: { config?: MyModuleConfig }) {
-    // 1. REQUIRED: Create service instances
-    const myService = new MyModuleService()
-    const myAPI = new MyModuleAPI()
-
-    // 2. REQUIRED: Register in DI container BEFORE initialization
-    container.provide(SERVICE_TOKENS.MY_SERVICE, myService)
-    container.provide(SERVICE_TOKENS.MY_API, myAPI)
-
-    // 3. CRITICAL: Initialize services with proper options
-    await myService.initialize({
-      waitForDependencies: true,  // REQUIRED: Wait for dependencies
-      maxRetries: 3,              // RECOMMENDED: Retry on failure
-      timeout: 5000               // OPTIONAL: Timeout for initialization
-    })
-
-    // Initialize API service if it needs initialization
-    if (myAPI.initialize) {
-      await myAPI.initialize({
-        waitForDependencies: true,
-        maxRetries: 3
-      })
-    }
-
-    // 4. Register components AFTER services are initialized
-    app.component('MyComponent', MyComponent)
-
-    // 5. OPTIONAL: Export for testing/debugging
-    return {
-      service: myService,
-      api: myAPI
-    }
-  }
-}
-```
-
-**MODULE CONFIGURATION IN app.config.ts:**
-```typescript
-// REQUIRED: Add module configuration
-export default {
-  modules: {
-    'my-module': {
-      enabled: true,
-      config: {
-        apiConfig: {
-          baseUrl: import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000'
-        },
-        // Module-specific configuration
-        features: {
-          realTimeUpdates: true,
-          offlineSupport: false
-        }
-      }
-    }
-  }
-}
-```
-
 **Nostr Integration Rules:**
 1. **NEVER create separate relay connections** - always use the central RelayHub
 2. **Access RelayHub through DI**: `const relayHub = injectService(SERVICE_TOKENS.RELAY_HUB)`
@@ -710,7 +660,7 @@ export function useMyModule() {
   const relayHub = injectService(SERVICE_TOKENS.RELAY_HUB)
   const authService = injectService(SERVICE_TOKENS.AUTH_SERVICE)
   const myAPI = injectService(SERVICE_TOKENS.MY_API)
-  
+
   // Never import services directly
   // ❌ import { relayHub } from '@/modules/base/nostr/relay-hub'
   // ✅ const relayHub = injectService(SERVICE_TOKENS.RELAY_HUB)
@@ -735,44 +685,34 @@ export function useMyModule() {
 - **ALWAYS use Shadcn Form components for all form implementations**
 - **ALWAYS extend BaseService for module services**
 - **NEVER create direct dependencies between modules**
+- **ALWAYS use semantic CSS classes, never hard-coded colors**
 
-### **⚠️ CRITICAL: JavaScript Falsy Value Bug Prevention**
-
-**ALWAYS use nullish coalescing (`??`) instead of logical OR (`||`) for numeric defaults:**
-
-```typescript
-// ❌ WRONG: Treats 0 as falsy, defaults to 1 even when quantity is validly 0
-quantity: productData.quantity || 1
-
-// ✅ CORRECT: Only defaults to 1 when quantity is null or undefined
-quantity: productData.quantity ?? 1
-```
-
-**Why this matters:**
-- JavaScript falsy values include: `false`, `0`, `""`, `null`, `undefined`, `NaN`
-- Using `||` for defaults will incorrectly override valid `0` values
-- This caused a critical bug where products with quantity `0` displayed as quantity `1`
-- The `??` operator only triggers for `null` and `undefined`, preserving valid `0` values
-
-**Common scenarios where this bug occurs:**
-- Product quantities, prices, counters (any numeric value where 0 is valid)
-- Boolean flags where `false` is a valid state
-- Empty strings that should be preserved vs. undefined strings
-
-**Rule of thumb:**
-- Use `||` only when `0`, `false`, or `""` should trigger the default
-- Use `??` when only `null`/`undefined` should trigger the default (most cases)
-
-**Build Configuration:**
+### **Build Configuration:**
 - Vite config includes PWA, image optimization, and bundle analysis
 - Manual chunking strategy for vendor libraries (vue-vendor, ui-vendor, shadcn)
 - Electron Forge configured for cross-platform packaging
 - TailwindCSS v4 integration via Vite plugin
 
-**Environment:**
-- Nostr relay configuration via `VITE_NOSTR_RELAYS` environment variable
-- PWA manifest configured for standalone app experience
-- Service worker with automatic updates every hour
+### **Environment Variables:**
+
+Required environment variables in `.env`:
+
+```bash
+# LNbits server URL for Lightning wallet functionality
+VITE_LNBITS_BASE_URL=http://localhost:5000
+
+# Nostr relay configuration (JSON array)
+VITE_NOSTR_RELAYS='["wss://relay1.example.com","wss://relay2.example.com"]'
+
+# Image upload server (pictrs)
+VITE_PICTRS_BASE_URL=https://img.mydomain.com
+
+# Admin public keys for feed moderation (JSON array)
+VITE_ADMIN_PUBKEYS='["pubkey1","pubkey2"]'
+
+# Optional: Disable WebSocket if needed
+VITE_WEBSOCKET_ENABLED=true
+```
 
 ## Mobile Browser File Input & Form Refresh Issues
 
@@ -906,86 +846,6 @@ window.addEventListener('beforeunload', blockNavigation)
 <form @submit.prevent="handleSubmit">
 ```
 
-### **Android 14/15 Camera Workarounds**
-
-**Non-Standard MIME Type Workaround:**
-```html
-<!-- Add non-standard MIME type to force camera access -->
-<input type="file" accept="image/*,android/allowCamera" capture="environment" />
-```
-
-**Plain File Input Fallback:**
-```html
-<!-- Fallback: Plain file input shows both camera and gallery options -->
-<input type="file" accept="image/*" />
-```
-
-### **Industry-Standard Patterns**
-
-**1. Page Visibility API (Primary Solution):**
-```javascript
-// Modern browsers: Use Page Visibility API instead of beforeunload
-document.addEventListener('visibilitychange', function() {
-  if (document.visibilityState === 'visible') {
-    // Resume critical operations, restore connections
-    resumeOperations()
-  } else {
-    // Save state, pause operations for battery conservation
-    saveStateAndPause()
-  }
-})
-```
-
-**2. Conditional BeforeUnload Protection:**
-```javascript
-// Only add beforeunload listeners when user has unsaved changes
-const addFormProtection = (hasUnsavedChanges) => {
-  if (hasUnsavedChanges) {
-    window.addEventListener('beforeunload', preventUnload)
-  } else {
-    window.removeEventListener('beforeunload', preventUnload)
-  }
-}
-```
-
-**3. Session Recovery Pattern:**
-```javascript
-// Save form state on visibility change
-document.addEventListener('visibilitychange', () => {
-  if (document.visibilityState === 'hidden') {
-    localStorage.setItem('formDraft', JSON.stringify(formData))
-  }
-})
-
-// Restore on page load
-window.addEventListener('load', () => {
-  const draft = localStorage.getItem('formDraft')
-  if (draft) restoreFormData(JSON.parse(draft))
-})
-```
-
-### **Testing & Debugging**
-
-**Reproduction Steps:**
-1. Open form with file upload on mobile device
-2. Select camera input during image upload operations
-3. Turn screen off/on during upload process
-4. Switch between apps during file selection
-5. Low memory conditions during camera usage
-
-**Success Indicators:**
-- User sees confirmation dialog instead of losing form data
-- Console warnings show visibility change detection working
-- Form state preservation during app switching
-- Camera input properly separates from gallery input
-
-**Debug Console Messages:**
-```javascript
-// Look for these defensive programming console messages
-console.warn('Form submission blocked during file upload')
-console.warn('Visibility change detected while form is open')
-```
-
 ### **Key Takeaways**
 
 1. **This is a systemic mobile browser issue**, not a bug in our application code
@@ -995,4 +855,4 @@ console.warn('Visibility change detected while form is open')
 5. **Separate camera/gallery inputs** are required for proper Android browser support
 6. **The defensive measures are working correctly** when users can choose to prevent navigation
 
-**⚠️ IMPORTANT**: These issues are intermittent by nature. The defensive programming approach ensures that when they do occur, users have the opportunity to save their work instead of losing form data.
\ No newline at end of file
+**⚠️ IMPORTANT**: These issues are intermittent by nature. The defensive programming approach ensures that when they do occur, users have the opportunity to save their work instead of losing form data.

From 678ccff694a355fcaf6300b9a4f6507ceba61ece Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 7 Nov 2025 16:00:07 +0100
Subject: [PATCH 02/32] Adds dynamic quick actions via modules

Introduces a dynamic quick action system, allowing modules to register actions that appear in a floating action button menu.

This provides a flexible way for modules to extend the application's functionality with common tasks like composing notes or initiating payments.
---
 src/composables/useQuickActions.ts |  95 ++++++++++++++++++++
 src/core/types.ts                  |  45 ++++++++--
 src/modules/nostr-feed/index.ts    |  25 ++++++
 src/pages/Home.vue                 | 137 +++++++++++++----------------
 4 files changed, 219 insertions(+), 83 deletions(-)
 create mode 100644 src/composables/useQuickActions.ts

diff --git a/src/composables/useQuickActions.ts b/src/composables/useQuickActions.ts
new file mode 100644
index 0000000..7046fbb
--- /dev/null
+++ b/src/composables/useQuickActions.ts
@@ -0,0 +1,95 @@
+import { computed } from 'vue'
+import { pluginManager } from '@/core/plugin-manager'
+import type { QuickAction } from '@/core/types'
+
+/**
+ * Composable for dynamic quick actions based on enabled modules
+ *
+ * Quick actions are module-provided action buttons that appear in the floating
+ * action button (FAB) menu. Each module can register its own quick actions
+ * for common tasks like composing notes, sending payments, adding expenses, etc.
+ *
+ * @example
+ * ```typescript
+ * const { quickActions, getActionsByCategory } = useQuickActions()
+ *
+ * // Get all actions
+ * const actions = quickActions.value
+ *
+ * // Get actions by category
+ * const composeActions = getActionsByCategory('compose')
+ * ```
+ */
+export function useQuickActions() {
+  /**
+   * Get all quick actions from installed modules
+   * Actions are sorted by order (lower = higher priority)
+   */
+  const quickActions = computed<QuickAction[]>(() => {
+    const actions: QuickAction[] = []
+
+    // Iterate through installed modules
+    const installedModules = pluginManager.getInstalledModules()
+
+    for (const moduleName of installedModules) {
+      const module = pluginManager.getModule(moduleName)
+      if (module?.plugin.quickActions) {
+        actions.push(...module.plugin.quickActions)
+      }
+    }
+
+    // Sort by order (lower = higher priority), then by label
+    return actions.sort((a, b) => {
+      const orderA = a.order ?? 999
+      const orderB = b.order ?? 999
+      if (orderA !== orderB) {
+        return orderA - orderB
+      }
+      return a.label.localeCompare(b.label)
+    })
+  })
+
+  /**
+   * Get actions filtered by category
+   */
+  const getActionsByCategory = (category: string) => {
+    return computed(() => {
+      return quickActions.value.filter(action => action.category === category)
+    })
+  }
+
+  /**
+   * Get a specific action by ID
+   */
+  const getActionById = (id: string) => {
+    return computed(() => {
+      return quickActions.value.find(action => action.id === id)
+    })
+  }
+
+  /**
+   * Check if any actions are available
+   */
+  const hasActions = computed(() => quickActions.value.length > 0)
+
+  /**
+   * Get all unique categories
+   */
+  const categories = computed(() => {
+    const cats = new Set<string>()
+    quickActions.value.forEach(action => {
+      if (action.category) {
+        cats.add(action.category)
+      }
+    })
+    return Array.from(cats).sort()
+  })
+
+  return {
+    quickActions,
+    getActionsByCategory,
+    getActionById,
+    hasActions,
+    categories
+  }
+}
diff --git a/src/core/types.ts b/src/core/types.ts
index 9ce1e47..c866653 100644
--- a/src/core/types.ts
+++ b/src/core/types.ts
@@ -1,37 +1,64 @@
 import type { App, Component } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
 
+// Quick action interface for modular action buttons
+export interface QuickAction {
+  /** Unique action ID */
+  id: string
+
+  /** Display label for the action */
+  label: string
+
+  /** Lucide icon name */
+  icon: string
+
+  /** Component to render when action is selected */
+  component: Component
+
+  /** Display order (lower = higher priority) */
+  order?: number
+
+  /** Action category (e.g., 'compose', 'wallet', 'utilities') */
+  category?: string
+
+  /** Whether action requires authentication */
+  requiresAuth?: boolean
+}
+
 // Base module plugin interface
 export interface ModulePlugin {
   /** Unique module name */
   name: string
-  
+
   /** Module version */
   version: string
-  
+
   /** Required dependencies (other module names) */
   dependencies?: string[]
-  
+
   /** Module configuration */
   config?: Record<string, any>
-  
+
   /** Install the module */
   install(app: App, options?: any): Promise<void> | void
-  
+
   /** Uninstall the module (cleanup) */
   uninstall?(): Promise<void> | void
-  
+
   /** Routes provided by this module */
   routes?: RouteRecordRaw[]
-  
+
   /** Components provided by this module */
   components?: Record<string, Component>
-  
+
   /** Services provided by this module */
   services?: Record<string, any>
-  
+
   /** Composables provided by this module */
   composables?: Record<string, any>
+
+  /** Quick actions provided by this module */
+  quickActions?: QuickAction[]
 }
 
 // Module configuration for app setup
diff --git a/src/modules/nostr-feed/index.ts b/src/modules/nostr-feed/index.ts
index e3a7191..c790302 100644
--- a/src/modules/nostr-feed/index.ts
+++ b/src/modules/nostr-feed/index.ts
@@ -1,7 +1,10 @@
 import type { App } from 'vue'
+import { markRaw } from 'vue'
 import type { ModulePlugin } from '@/core/types'
 import { container, SERVICE_TOKENS } from '@/core/di-container'
 import NostrFeed from './components/NostrFeed.vue'
+import NoteComposer from './components/NoteComposer.vue'
+import RideshareComposer from './components/RideshareComposer.vue'
 import { useFeed } from './composables/useFeed'
 import { FeedService } from './services/FeedService'
 import { ProfileService } from './services/ProfileService'
@@ -17,6 +20,28 @@ export const nostrFeedModule: ModulePlugin = {
   version: '1.0.0',
   dependencies: ['base'],
 
+  // Register quick actions for the FAB menu
+  quickActions: [
+    {
+      id: 'note',
+      label: 'Note',
+      icon: 'MessageSquare',
+      component: markRaw(NoteComposer),
+      category: 'compose',
+      order: 1,
+      requiresAuth: true
+    },
+    {
+      id: 'rideshare',
+      label: 'Rideshare',
+      icon: 'Car',
+      component: markRaw(RideshareComposer),
+      category: 'compose',
+      order: 2,
+      requiresAuth: true
+    }
+  ],
+
   async install(app: App) {
     console.log('nostr-feed module: Starting installation...')
 
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 23d5c4d..9b78320 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -36,24 +36,20 @@
 
     <!-- Main Feed Area - Takes remaining height with scrolling -->
     <div class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
-      <!-- Collapsible Composer -->
-      <div v-if="showComposer || replyTo" class="border-b bg-background sticky top-0 z-10">
+      <!-- Quick Action Component Area -->
+      <div v-if="activeAction || replyTo" class="border-b bg-background sticky top-0 z-10">
         <div class="max-h-[70vh] overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
           <div class="px-4 py-3 sm:px-6">
-            <!-- Regular Note Composer -->
-            <NoteComposer
-              v-if="composerType === 'note' || replyTo"
+            <!-- Dynamic Quick Action Component -->
+            <component
+              :is="activeAction?.component"
+              v-if="activeAction"
               :reply-to="replyTo"
-              @note-published="onNotePublished"
+              @note-published="onActionComplete"
+              @rideshare-published="onActionComplete"
+              @action-complete="onActionComplete"
               @clear-reply="onClearReply"
-              @close="onCloseComposer"
-            />
-
-            <!-- Rideshare Composer -->
-            <RideshareComposer
-              v-else-if="composerType === 'rideshare'"
-              @rideshare-published="onRidesharePublished"
-              @close="onCloseComposer"
+              @close="closeQuickAction"
             />
           </div>
         </div>
@@ -72,39 +68,32 @@
       </div>
     </div>
 
-    <!-- Floating Action Buttons for Compose -->
-    <div v-if="!showComposer && !replyTo" class="fixed bottom-6 right-6 z-50">
-      <!-- Main compose button -->
+    <!-- Floating Quick Action Button -->
+    <div v-if="!activeAction && !replyTo && quickActions.length > 0" class="fixed bottom-6 right-6 z-50">
       <div class="flex flex-col items-end gap-3">
-        <!-- Secondary buttons (when expanded) -->
-        <div v-if="showComposerOptions" class="flex flex-col gap-2">
+        <!-- Quick Action Buttons (when expanded) -->
+        <div v-if="showQuickActions" class="flex flex-col gap-2">
           <Button
-            @click="openComposer('note')"
+            v-for="action in quickActions"
+            :key="action.id"
+            @click="openQuickAction(action)"
             size="lg"
             class="h-12 px-4 rounded-full shadow-lg hover:shadow-xl transition-all gap-2 bg-card border-2 border-border hover:bg-accent text-card-foreground"
           >
-            <MessageSquare class="h-4 w-4" />
-            <span class="text-sm font-medium">Note</span>
-          </Button>
-          <Button
-            @click="openComposer('rideshare')"
-            size="lg"
-            class="h-12 px-4 rounded-full shadow-lg hover:shadow-xl transition-all gap-2 bg-card border-2 border-border hover:bg-accent text-card-foreground"
-          >
-            <Car class="h-4 w-4" />
-            <span class="text-sm font-medium">Rideshare</span>
+            <component :is="getIconComponent(action.icon)" class="h-4 w-4" />
+            <span class="text-sm font-medium">{{ action.label }}</span>
           </Button>
         </div>
 
         <!-- Main FAB -->
         <Button
-          @click="toggleComposerOptions"
+          @click="toggleQuickActions"
           size="lg"
           class="h-14 w-14 rounded-full shadow-lg hover:shadow-xl transition-all bg-primary hover:bg-primary/90 border-2 border-primary-foreground/20 flex items-center justify-center p-0"
         >
           <Plus
             class="h-6 w-6 stroke-[2.5] transition-transform duration-200"
-            :class="{ 'rotate-45': showComposerOptions }"
+            :class="{ 'rotate-45': showQuickActions }"
           />
         </Button>
       </div>
@@ -136,32 +125,34 @@
 import { ref, computed, watch } from 'vue'
 
 import { Button } from '@/components/ui/button'
-import { Filter, Plus, MessageSquare, Car } from 'lucide-vue-next'
+import { Filter, Plus } from 'lucide-vue-next'
+import * as LucideIcons from 'lucide-vue-next'
 import PWAInstallPrompt from '@/components/pwa/PWAInstallPrompt.vue'
 import FeedFilters from '@/modules/nostr-feed/components/FeedFilters.vue'
-import NoteComposer from '@/modules/nostr-feed/components/NoteComposer.vue'
-import RideshareComposer from '@/modules/nostr-feed/components/RideshareComposer.vue'
 import NostrFeed from '@/modules/nostr-feed/components/NostrFeed.vue'
 import { FILTER_PRESETS } from '@/modules/nostr-feed/config/content-filters'
+import { useQuickActions } from '@/composables/useQuickActions'
 import appConfig from '@/app.config'
 import type { ContentFilter } from '@/modules/nostr-feed/services/FeedService'
-import type { ReplyToNote } from '@/modules/nostr-feed/components/NoteComposer.vue'
+import type { QuickAction } from '@/core/types'
+
+// Get quick actions from modules
+const { quickActions } = useQuickActions()
 
 // Get admin pubkeys from app config
 const adminPubkeys = appConfig.modules['nostr-feed']?.config?.adminPubkeys || []
 
 // UI state
 const showFilters = ref(false)
-const showComposer = ref(false)
-const showComposerOptions = ref(false)
-const composerType = ref<'note' | 'rideshare'>('note')
+const showQuickActions = ref(false)
+const activeAction = ref<QuickAction | null>(null)
 
 // Feed configuration
 const selectedFilters = ref<ContentFilter[]>(FILTER_PRESETS.all)
 const feedKey = ref(0) // Force feed component to re-render when filters change
 
-// Note composer state
-const replyTo = ref<ReplyToNote | undefined>()
+// Reply state (for note composer compatibility)
+const replyTo = ref<any | undefined>()
 
 // Quick filter presets for mobile bottom bar
 const quickFilterPresets = {
@@ -221,48 +212,46 @@ const setQuickFilter = (presetKey: string) => {
   }
 }
 
-const onNotePublished = (noteId: string) => {
-  console.log('Note published:', noteId)
-  // Refresh the feed to show the new note
-  feedKey.value++
-  // Clear reply state and hide composer
+// Quick action methods
+const toggleQuickActions = () => {
+  showQuickActions.value = !showQuickActions.value
+}
+
+const openQuickAction = (action: QuickAction) => {
+  activeAction.value = action
+  showQuickActions.value = false
+}
+
+const closeQuickAction = () => {
+  activeAction.value = null
+  replyTo.value = undefined
+}
+
+// Event handlers for quick action components
+const onActionComplete = (eventData?: any) => {
+  console.log('Quick action completed:', activeAction.value?.id, eventData)
+  // Refresh the feed to show new content
+  feedKey.value++
+  // Close the action
+  activeAction.value = null
   replyTo.value = undefined
-  showComposer.value = false
 }
 
 const onClearReply = () => {
   replyTo.value = undefined
-  showComposer.value = false
 }
 
-const onReplyToNote = (note: ReplyToNote) => {
+const onReplyToNote = (note: any) => {
   replyTo.value = note
-  showComposer.value = true
+  // Find and open the note composer action
+  const noteAction = quickActions.value.find(a => a.id === 'note')
+  if (noteAction) {
+    activeAction.value = noteAction
+  }
 }
 
-const onCloseComposer = () => {
-  showComposer.value = false
-  showComposerOptions.value = false
-  replyTo.value = undefined
-}
-
-// New composer methods
-const toggleComposerOptions = () => {
-  showComposerOptions.value = !showComposerOptions.value
-}
-
-const openComposer = (type: 'note' | 'rideshare') => {
-  composerType.value = type
-  showComposer.value = true
-  showComposerOptions.value = false
-}
-
-const onRidesharePublished = (noteId: string) => {
-  console.log('Rideshare post published:', noteId)
-  // Refresh the feed to show the new rideshare post
-  feedKey.value++
-  // Hide composer
-  showComposer.value = false
-  showComposerOptions.value = false
+// Helper to get Lucide icon component
+const getIconComponent = (iconName: string) => {
+  return (LucideIcons as any)[iconName] || Plus
 }
 </script>

From 9ed674d0f3ef701db81e236335a47fd73b84d8c6 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 7 Nov 2025 16:21:59 +0100
Subject: [PATCH 03/32] Adds expense tracking module

Adds a new module for tracking user expenses.

The module includes:
- Configuration settings for the LNbits API endpoint and timeouts.
- An ExpensesAPI service for fetching accounts and submitting expense entries.
- A UI component for adding expenses, including account selection and form input.
- Dependency injection for the ExpensesAPI service.

This allows users to submit expense entries with account selection and reference data, which will be linked to their wallet.
---
 src/app.config.ts                             |  14 +
 src/app.ts                                    |  11 +-
 src/core/di-container.ts                      |   3 +
 .../expenses/components/AccountSelector.vue   | 257 ++++++++++++++++
 .../expenses/components/AddExpense.vue        | 288 ++++++++++++++++++
 src/modules/expenses/index.ts                 |  58 ++++
 src/modules/expenses/services/ExpensesAPI.ts  | 248 +++++++++++++++
 src/modules/expenses/types/index.ts           |  97 ++++++
 8 files changed, 975 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/expenses/components/AccountSelector.vue
 create mode 100644 src/modules/expenses/components/AddExpense.vue
 create mode 100644 src/modules/expenses/index.ts
 create mode 100644 src/modules/expenses/services/ExpensesAPI.ts
 create mode 100644 src/modules/expenses/types/index.ts

diff --git a/src/app.config.ts b/src/app.config.ts
index 8060762..8893996 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -93,6 +93,20 @@ export const appConfig: AppConfig = {
           pollingInterval: 10000 // 10 seconds for polling updates
         }
       }
+    },
+    expenses: {
+      name: 'expenses',
+      enabled: true,
+      lazy: false,
+      config: {
+        apiConfig: {
+          baseUrl: import.meta.env.VITE_LNBITS_BASE_URL || 'http://localhost:5000',
+          timeout: 30000 // 30 seconds for API requests
+        },
+        defaultCurrency: 'sats',
+        maxExpenseAmount: 1000000, // 1M sats
+        requireDescription: true
+      }
     }
   },
   
diff --git a/src/app.ts b/src/app.ts
index 459283e..6878880 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -16,6 +16,7 @@ import chatModule from './modules/chat'
 import eventsModule from './modules/events'
 import marketModule from './modules/market'
 import walletModule from './modules/wallet'
+import expensesModule from './modules/expenses'
 
 // Root component
 import App from './App.vue'
@@ -43,7 +44,8 @@ export async function createAppInstance() {
     ...chatModule.routes || [],
     ...eventsModule.routes || [],
     ...marketModule.routes || [],
-    ...walletModule.routes || []
+    ...walletModule.routes || [],
+    ...expensesModule.routes || []
   ].filter(Boolean)
 
   // Create router with all routes available immediately
@@ -126,6 +128,13 @@ export async function createAppInstance() {
     )
   }
 
+  // Register expenses module
+  if (appConfig.modules.expenses?.enabled) {
+    moduleRegistrations.push(
+      pluginManager.register(expensesModule, appConfig.modules.expenses)
+    )
+  }
+
   // Wait for all modules to register
   await Promise.all(moduleRegistrations)
 
diff --git a/src/core/di-container.ts b/src/core/di-container.ts
index da71624..0d27524 100644
--- a/src/core/di-container.ts
+++ b/src/core/di-container.ts
@@ -160,6 +160,9 @@ export const SERVICE_TOKENS = {
 
   // Image upload services
   IMAGE_UPLOAD_SERVICE: Symbol('imageUploadService'),
+
+  // Expenses services
+  EXPENSES_API: Symbol('expensesAPI'),
 } as const
 
 // Type-safe injection helpers
diff --git a/src/modules/expenses/components/AccountSelector.vue b/src/modules/expenses/components/AccountSelector.vue
new file mode 100644
index 0000000..ec49ed3
--- /dev/null
+++ b/src/modules/expenses/components/AccountSelector.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="space-y-4">
+    <!-- Breadcrumb showing current path -->
+    <div v-if="selectedPath.length > 0" class="flex items-center gap-2 text-sm">
+      <Button
+        variant="ghost"
+        size="sm"
+        @click="navigateToRoot"
+        class="h-7 px-2"
+      >
+        <ChevronLeft class="h-4 w-4 mr-1" />
+        Start
+      </Button>
+      <ChevronRight class="h-4 w-4 text-muted-foreground" />
+      <div class="flex items-center gap-2">
+        <span
+          v-for="(node, index) in selectedPath"
+          :key="node.account.id"
+          class="flex items-center gap-2"
+        >
+          <Button
+            variant="ghost"
+            size="sm"
+            @click="navigateToLevel(index)"
+            class="h-7 px-2 text-muted-foreground hover:text-foreground"
+          >
+            {{ getAccountDisplayName(node.account.name) }}
+          </Button>
+          <ChevronRight
+            v-if="index < selectedPath.length - 1"
+            class="h-4 w-4 text-muted-foreground"
+          />
+        </span>
+      </div>
+    </div>
+
+    <!-- Account selection list -->
+    <div class="border border-border rounded-lg bg-card">
+      <!-- Loading state -->
+      <div
+        v-if="isLoading"
+        class="flex items-center justify-center py-12"
+      >
+        <Loader2 class="h-6 w-6 animate-spin text-muted-foreground" />
+        <span class="ml-2 text-sm text-muted-foreground">Loading accounts...</span>
+      </div>
+
+      <!-- Error state -->
+      <div
+        v-else-if="error"
+        class="flex flex-col items-center justify-center py-12 px-4"
+      >
+        <AlertCircle class="h-8 w-8 text-destructive mb-2" />
+        <p class="text-sm text-destructive">{{ error }}</p>
+        <Button
+          variant="outline"
+          size="sm"
+          @click="loadAccounts"
+          class="mt-4"
+        >
+          <RefreshCw class="h-4 w-4 mr-2" />
+          Retry
+        </Button>
+      </div>
+
+      <!-- Account list -->
+      <div v-else-if="currentNodes.length > 0" class="divide-y divide-border">
+        <button
+          v-for="node in currentNodes"
+          :key="node.account.id"
+          @click="selectNode(node)"
+          type="button"
+          class="w-full flex items-center justify-between p-4 hover:bg-muted/50 transition-colors text-left"
+        >
+          <div class="flex items-center gap-3">
+            <Folder
+              v-if="node.account.has_children"
+              class="h-5 w-5 text-primary"
+            />
+            <FileText
+              v-else
+              class="h-5 w-5 text-muted-foreground"
+            />
+            <div>
+              <p class="font-medium text-foreground">
+                {{ getAccountDisplayName(node.account.name) }}
+              </p>
+              <p
+                v-if="node.account.description"
+                class="text-sm text-muted-foreground"
+              >
+                {{ node.account.description }}
+              </p>
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <Badge
+              v-if="!node.account.has_children"
+              variant="outline"
+              class="text-xs"
+            >
+              {{ node.account.account_type }}
+            </Badge>
+            <ChevronRight
+              v-if="node.account.has_children"
+              class="h-5 w-5 text-muted-foreground"
+            />
+          </div>
+        </button>
+      </div>
+
+      <!-- Empty state -->
+      <div
+        v-else
+        class="flex flex-col items-center justify-center py-12 px-4"
+      >
+        <Folder class="h-12 w-12 text-muted-foreground mb-2" />
+        <p class="text-sm text-muted-foreground">No accounts available</p>
+      </div>
+    </div>
+
+    <!-- Selected account display -->
+    <div
+      v-if="selectedAccount"
+      class="flex items-center justify-between p-4 rounded-lg border-2 border-primary bg-primary/5"
+    >
+      <div class="flex items-center gap-3">
+        <Check class="h-5 w-5 text-primary" />
+        <div>
+          <p class="font-medium text-foreground">Selected Account</p>
+          <p class="text-sm text-muted-foreground">{{ selectedAccount.name }}</p>
+        </div>
+      </div>
+      <Badge variant="default">{{ selectedAccount.account_type }}</Badge>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import {
+  ChevronLeft,
+  ChevronRight,
+  Folder,
+  FileText,
+  Loader2,
+  AlertCircle,
+  RefreshCw,
+  Check
+} from 'lucide-vue-next'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import type { ExpensesAPI } from '../services/ExpensesAPI'
+import type { Account, AccountNode } from '../types'
+
+interface Props {
+  rootAccount?: string
+  modelValue?: Account | null
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: Account | null): void
+  (e: 'account-selected', value: Account): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+// Inject services
+const expensesAPI = injectService<ExpensesAPI>(SERVICE_TOKENS.EXPENSES_API)
+
+// Component state
+const isLoading = ref(false)
+const error = ref<string | null>(null)
+const accountHierarchy = ref<AccountNode[]>([])
+const selectedPath = ref<AccountNode[]>([])
+const selectedAccount = ref<Account | null>(props.modelValue ?? null)
+
+// Current nodes to display (either root or children of selected node)
+const currentNodes = computed(() => {
+  if (selectedPath.value.length === 0) {
+    return accountHierarchy.value
+  }
+
+  const lastNode = selectedPath.value[selectedPath.value.length - 1]
+  return lastNode.children
+})
+
+/**
+ * Get display name from full account path
+ * e.g., "Expenses:Groceries:Organic" -> "Organic"
+ */
+function getAccountDisplayName(fullName: string): string {
+  const parts = fullName.split(':')
+  return parts[parts.length - 1]
+}
+
+/**
+ * Load accounts from API
+ */
+async function loadAccounts() {
+  isLoading.value = true
+  error.value = null
+
+  try {
+    accountHierarchy.value = await expensesAPI.getAccountHierarchy(
+      props.rootAccount
+    )
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to load accounts'
+    console.error('[AccountSelector] Error loading accounts:', err)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+/**
+ * Handle node selection
+ */
+function selectNode(node: AccountNode) {
+  if (node.account.has_children) {
+    // Navigate into folder
+    selectedPath.value.push(node)
+    selectedAccount.value = null
+    emit('update:modelValue', null)
+  } else {
+    // Select leaf account
+    selectedAccount.value = node.account
+    emit('update:modelValue', node.account)
+    emit('account-selected', node.account)
+  }
+}
+
+/**
+ * Navigate back to root
+ */
+function navigateToRoot() {
+  selectedPath.value = []
+  selectedAccount.value = null
+  emit('update:modelValue', null)
+}
+
+/**
+ * Navigate to specific level in breadcrumb
+ */
+function navigateToLevel(level: number) {
+  selectedPath.value = selectedPath.value.slice(0, level + 1)
+  selectedAccount.value = null
+  emit('update:modelValue', null)
+}
+
+// Load accounts on mount
+onMounted(() => {
+  loadAccounts()
+})
+</script>
diff --git a/src/modules/expenses/components/AddExpense.vue b/src/modules/expenses/components/AddExpense.vue
new file mode 100644
index 0000000..6b24130
--- /dev/null
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -0,0 +1,288 @@
+<template>
+  <div class="bg-card border border-border rounded-lg shadow-lg overflow-hidden">
+    <!-- Header -->
+    <div class="flex items-center justify-between p-4 border-b border-border">
+      <div class="flex items-center gap-2">
+        <DollarSign class="h-5 w-5 text-primary" />
+        <h3 class="font-semibold text-foreground">Add Expense</h3>
+      </div>
+      <Button
+        variant="ghost"
+        size="icon"
+        @click="$emit('close')"
+      >
+        <X class="h-4 w-4" />
+      </Button>
+    </div>
+
+    <!-- Form -->
+    <div class="p-4 space-y-4">
+      <!-- Step indicator -->
+      <div class="flex items-center justify-center gap-2 mb-4">
+        <div
+          :class="[
+            'flex items-center justify-center w-8 h-8 rounded-full font-medium text-sm transition-colors',
+            currentStep === 1
+              ? 'bg-primary text-primary-foreground'
+              : selectedAccount
+              ? 'bg-primary/20 text-primary'
+              : 'bg-muted text-muted-foreground'
+          ]"
+        >
+          1
+        </div>
+        <div class="w-12 h-px bg-border" />
+        <div
+          :class="[
+            'flex items-center justify-center w-8 h-8 rounded-full font-medium text-sm transition-colors',
+            currentStep === 2
+              ? 'bg-primary text-primary-foreground'
+              : 'bg-muted text-muted-foreground'
+          ]"
+        >
+          2
+        </div>
+      </div>
+
+      <!-- Step 1: Account Selection -->
+      <div v-if="currentStep === 1">
+        <p class="text-sm text-muted-foreground mb-4">
+          Select the account for this expense
+        </p>
+        <AccountSelector
+          v-model="selectedAccount"
+          root-account="Expenses"
+          @account-selected="handleAccountSelected"
+        />
+      </div>
+
+      <!-- Step 2: Expense Details -->
+      <div v-if="currentStep === 2">
+        <form @submit="onSubmit" class="space-y-4">
+          <!-- Description -->
+          <FormField v-slot="{ componentField }" name="description">
+            <FormItem>
+              <FormLabel>Description *</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="e.g., Groceries for community dinner"
+                  v-bind="componentField"
+                  rows="3"
+                />
+              </FormControl>
+              <FormDescription>
+                Describe what this expense was for
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <!-- Amount -->
+          <FormField v-slot="{ componentField }" name="amount">
+            <FormItem>
+              <FormLabel>Amount (sats) *</FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  placeholder="0"
+                  v-bind="componentField"
+                  min="1"
+                  step="1"
+                />
+              </FormControl>
+              <FormDescription>
+                Amount in satoshis
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <!-- Reference (optional) -->
+          <FormField v-slot="{ componentField }" name="reference">
+            <FormItem>
+              <FormLabel>Reference</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="e.g., Invoice #123, Receipt #456"
+                  v-bind="componentField"
+                />
+              </FormControl>
+              <FormDescription>
+                Optional reference number or note
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <!-- Account from equity checkbox -->
+          <FormField v-slot="{ value, handleChange }" name="isEquity">
+            <FormItem>
+              <div class="flex items-center space-x-2">
+                <FormControl>
+                  <Checkbox
+                    :model-value="value"
+                    @update:model-value="handleChange"
+                    :disabled="isSubmitting"
+                  />
+                </FormControl>
+                <div class="space-y-1 leading-none">
+                  <FormLabel>Account from equity</FormLabel>
+                  <FormDescription>
+                    Check if this expense should be accounted from your equity
+                  </FormDescription>
+                </div>
+              </div>
+            </FormItem>
+          </FormField>
+
+          <!-- Selected account info -->
+          <div class="p-3 rounded-lg bg-muted/50">
+            <p class="text-sm font-medium text-foreground mb-1">
+              Account: {{ selectedAccount?.name }}
+            </p>
+            <p
+              v-if="selectedAccount?.description"
+              class="text-xs text-muted-foreground"
+            >
+              {{ selectedAccount.description }}
+            </p>
+          </div>
+
+          <!-- Action buttons -->
+          <div class="flex items-center gap-2 pt-2">
+            <Button
+              type="button"
+              variant="outline"
+              @click="currentStep = 1"
+              :disabled="isSubmitting"
+              class="flex-1"
+            >
+              <ChevronLeft class="h-4 w-4 mr-1" />
+              Back
+            </Button>
+            <Button
+              type="submit"
+              :disabled="isSubmitting || !isFormValid"
+              class="flex-1"
+            >
+              <Loader2
+                v-if="isSubmitting"
+                class="h-4 w-4 mr-2 animate-spin"
+              />
+              <span>{{ isSubmitting ? 'Submitting...' : 'Submit Expense' }}</span>
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { DollarSign, X, ChevronLeft, Loader2 } from 'lucide-vue-next'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import type { ExpensesAPI } from '../services/ExpensesAPI'
+import type { Account } from '../types'
+import AccountSelector from './AccountSelector.vue'
+
+interface Emits {
+  (e: 'close'): void
+  (e: 'expense-submitted'): void
+  (e: 'action-complete'): void
+}
+
+const emit = defineEmits<Emits>()
+
+// Inject services
+const expensesAPI = injectService<ExpensesAPI>(SERVICE_TOKENS.EXPENSES_API)
+
+// Component state
+const currentStep = ref(1)
+const selectedAccount = ref<Account | null>(null)
+const isSubmitting = ref(false)
+
+// Form schema
+const formSchema = toTypedSchema(
+  z.object({
+    description: z.string().min(1, 'Description is required').max(500, 'Description too long'),
+    amount: z.coerce.number().min(1, 'Amount must be at least 1 sat'),
+    reference: z.string().max(100, 'Reference too long').optional(),
+    isEquity: z.boolean().default(false)
+  })
+)
+
+// Set up form
+const form = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    description: '',
+    amount: 0,
+    reference: '',
+    isEquity: false
+  }
+})
+
+const { resetForm, meta } = form
+const isFormValid = computed(() => meta.value.valid)
+
+/**
+ * Handle account selection
+ */
+function handleAccountSelected(account: Account) {
+  selectedAccount.value = account
+  currentStep.value = 2
+}
+
+/**
+ * Submit expense
+ */
+const onSubmit = form.handleSubmit(async (values) => {
+  if (!selectedAccount.value) {
+    console.error('[AddExpense] No account selected')
+    return
+  }
+
+  isSubmitting.value = true
+
+  try {
+    await expensesAPI.submitExpense({
+      description: values.description,
+      amount: values.amount,
+      expense_account: selectedAccount.value.name,
+      is_equity: values.isEquity,
+      user_wallet: '', // Will be filled by backend from auth
+      reference: values.reference,
+      currency: 'sats'
+    })
+
+    // Reset form and close
+    resetForm()
+    selectedAccount.value = null
+    currentStep.value = 1
+
+    emit('expense-submitted')
+    emit('action-complete')
+    emit('close')
+  } catch (error) {
+    console.error('[AddExpense] Error submitting expense:', error)
+  } finally {
+    isSubmitting.value = false
+  }
+})
+</script>
diff --git a/src/modules/expenses/index.ts b/src/modules/expenses/index.ts
new file mode 100644
index 0000000..8e21d18
--- /dev/null
+++ b/src/modules/expenses/index.ts
@@ -0,0 +1,58 @@
+/**
+ * Expenses Module
+ *
+ * Provides expense tracking and submission functionality
+ * integrated with castle LNbits extension.
+ */
+
+import type { App } from 'vue'
+import { markRaw } from 'vue'
+import type { ModulePlugin } from '@/core/types'
+import { container, SERVICE_TOKENS } from '@/core/di-container'
+import { ExpensesAPI } from './services/ExpensesAPI'
+import AddExpense from './components/AddExpense.vue'
+
+export const expensesModule: ModulePlugin = {
+  name: 'expenses',
+  version: '1.0.0',
+  dependencies: ['base'],
+
+  quickActions: [
+    {
+      id: 'add-expense',
+      label: 'Expense',
+      icon: 'DollarSign',
+      component: markRaw(AddExpense),
+      category: 'finance',
+      order: 10,
+      requiresAuth: true
+    }
+  ],
+
+  async install(app: App) {
+    console.log('[Expenses Module] Installing...')
+
+    // 1. Create and register service
+    const expensesAPI = new ExpensesAPI()
+    container.provide(SERVICE_TOKENS.EXPENSES_API, expensesAPI)
+
+    // 2. Initialize service (wait for dependencies)
+    await expensesAPI.initialize({
+      waitForDependencies: true,
+      maxRetries: 3,
+      retryDelay: 1000
+    })
+
+    console.log('[Expenses Module] ExpensesAPI initialized')
+
+    // 3. Register components globally (optional, for use outside quick actions)
+    app.component('AddExpense', AddExpense)
+
+    console.log('[Expenses Module] Installed successfully')
+  }
+}
+
+export default expensesModule
+
+// Export types for use in other modules
+export type { Account, AccountNode, ExpenseEntry, ExpenseEntryRequest } from './types'
diff --git a/src/modules/expenses/services/ExpensesAPI.ts b/src/modules/expenses/services/ExpensesAPI.ts
new file mode 100644
index 0000000..0646bc7
--- /dev/null
+++ b/src/modules/expenses/services/ExpensesAPI.ts
@@ -0,0 +1,248 @@
+/**
+ * API service for castle extension expense operations
+ */
+
+import { BaseService } from '@/core/base/BaseService'
+import type {
+  Account,
+  ExpenseEntryRequest,
+  ExpenseEntry,
+  AccountNode
+} from '../types'
+import { appConfig } from '@/app.config'
+
+export class ExpensesAPI extends BaseService {
+  protected readonly metadata = {
+    name: 'ExpensesAPI',
+    version: '1.0.0',
+    dependencies: ['AuthService', 'ToastService']
+  }
+
+  private get config() {
+    return appConfig.modules.expenses.config
+  }
+
+  private get baseUrl() {
+    return this.config?.apiConfig?.baseUrl || ''
+  }
+
+  protected async onInitialize(): Promise<void> {
+    console.log('[ExpensesAPI] Initialized with config:', {
+      baseUrl: this.baseUrl,
+      timeout: this.config?.apiConfig?.timeout
+    })
+  }
+
+  /**
+   * Get authentication headers
+   */
+  private getHeaders(): HeadersInit {
+    if (!this.authService) {
+      throw new Error('AuthService not available')
+    }
+
+    const walletKey = this.authService.walletKey
+    if (!walletKey) {
+      throw new Error('Wallet key not available. Please log in.')
+    }
+
+    return {
+      'Content-Type': 'application/json',
+      'X-Api-Key': walletKey
+    }
+  }
+
+  /**
+   * Get all accounts from castle
+   *
+   * Note: Currently returns all accounts. Once castle API implements
+   * user permissions, use filter_by_user=true parameter.
+   */
+  async getAccounts(): Promise<Account[]> {
+    try {
+      const response = await fetch(`${this.baseUrl}/api/v1/accounts`, {
+        method: 'GET',
+        headers: this.getHeaders(),
+        signal: AbortSignal.timeout(this.config?.apiConfig?.timeout || 30000)
+      })
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch accounts: ${response.statusText}`)
+      }
+
+      const accounts = await response.json()
+      return accounts as Account[]
+    } catch (error) {
+      console.error('[ExpensesAPI] Error fetching accounts:', error)
+      if (this.toastService) {
+        this.toastService.error('Failed to load accounts', {
+          description: error instanceof Error ? error.message : 'Unknown error'
+        })
+      }
+      throw error
+    }
+  }
+
+  /**
+   * Get accounts in hierarchical tree structure
+   *
+   * Converts flat account list to nested tree based on colon-separated names
+   * e.g., "Expenses:Groceries:Organic" becomes nested structure
+   */
+  async getAccountHierarchy(rootAccount?: string): Promise<AccountNode[]> {
+    const accounts = await this.getAccounts()
+
+    // Filter by root account if specified
+    let filteredAccounts = accounts
+    if (rootAccount) {
+      filteredAccounts = accounts.filter(
+        (acc) =>
+          acc.name === rootAccount || acc.name.startsWith(`${rootAccount}:`)
+      )
+    }
+
+    // Build hierarchy
+    const accountMap = new Map<string, AccountNode>()
+
+    // First pass: Create nodes for all accounts
+    for (const account of filteredAccounts) {
+      const parts = account.name.split(':')
+      const level = parts.length - 1
+      const parentName = parts.slice(0, -1).join(':')
+
+      accountMap.set(account.name, {
+        account: {
+          ...account,
+          level,
+          parent_account: parentName || undefined,
+          has_children: false
+        },
+        children: []
+      })
+    }
+
+    // Second pass: Build parent-child relationships
+    const rootNodes: AccountNode[] = []
+
+    for (const [_name, node] of accountMap.entries()) {
+      const parentName = node.account.parent_account
+
+      if (parentName && accountMap.has(parentName)) {
+        // Add to parent's children
+        const parent = accountMap.get(parentName)!
+        parent.children.push(node)
+        parent.account.has_children = true
+      } else {
+        // Root level node
+        rootNodes.push(node)
+      }
+    }
+
+    // Sort children by name at each level
+    const sortNodes = (nodes: AccountNode[]) => {
+      nodes.sort((a, b) => a.account.name.localeCompare(b.account.name))
+      nodes.forEach((node) => sortNodes(node.children))
+    }
+    sortNodes(rootNodes)
+
+    return rootNodes
+  }
+
+  /**
+   * Submit expense entry to castle
+   */
+  async submitExpense(request: ExpenseEntryRequest): Promise<ExpenseEntry> {
+    try {
+      const response = await fetch(`${this.baseUrl}/api/v1/entries/expense`, {
+        method: 'POST',
+        headers: this.getHeaders(),
+        body: JSON.stringify(request),
+        signal: AbortSignal.timeout(this.config?.apiConfig?.timeout || 30000)
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}))
+        const errorMessage =
+          errorData.detail || `Failed to submit expense: ${response.statusText}`
+        throw new Error(errorMessage)
+      }
+
+      const entry = await response.json()
+
+      if (this.toastService) {
+        this.toastService.success('Expense submitted', {
+          description: 'Your expense is pending admin approval'
+        })
+      }
+
+      return entry as ExpenseEntry
+    } catch (error) {
+      console.error('[ExpensesAPI] Error submitting expense:', error)
+
+      let errorMessage = 'Failed to submit expense'
+      if (error instanceof Error) {
+        errorMessage = error.message
+      }
+
+      if (this.toastService) {
+        this.toastService.error('Submission failed', {
+          description: errorMessage
+        })
+      }
+
+      throw error
+    }
+  }
+
+  /**
+   * Get user's expense entries
+   */
+  async getUserExpenses(): Promise<ExpenseEntry[]> {
+    try {
+      const response = await fetch(`${this.baseUrl}/api/v1/entries/user`, {
+        method: 'GET',
+        headers: this.getHeaders(),
+        signal: AbortSignal.timeout(this.config?.apiConfig?.timeout || 30000)
+      })
+
+      if (!response.ok) {
+        throw new Error(
+          `Failed to fetch user expenses: ${response.statusText}`
+        )
+      }
+
+      const entries = await response.json()
+      return entries as ExpenseEntry[]
+    } catch (error) {
+      console.error('[ExpensesAPI] Error fetching user expenses:', error)
+      if (this.toastService) {
+        this.toastService.error('Failed to load expenses', {
+          description: error instanceof Error ? error.message : 'Unknown error'
+        })
+      }
+      throw error
+    }
+  }
+
+  /**
+   * Get user's balance with castle
+   */
+  async getUserBalance(): Promise<{ balance: number; currency: string }> {
+    try {
+      const response = await fetch(`${this.baseUrl}/api/v1/balance`, {
+        method: 'GET',
+        headers: this.getHeaders(),
+        signal: AbortSignal.timeout(this.config?.apiConfig?.timeout || 30000)
+      })
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch balance: ${response.statusText}`)
+      }
+
+      return await response.json()
+    } catch (error) {
+      console.error('[ExpensesAPI] Error fetching balance:', error)
+      throw error
+    }
+  }
+}
diff --git a/src/modules/expenses/types/index.ts b/src/modules/expenses/types/index.ts
new file mode 100644
index 0000000..04a4c97
--- /dev/null
+++ b/src/modules/expenses/types/index.ts
@@ -0,0 +1,97 @@
+/**
+ * Types for the Expenses module
+ */
+
+/**
+ * Account types in the castle double-entry accounting system
+ */
+export enum AccountType {
+  ASSET = 'asset',
+  LIABILITY = 'liability',
+  EQUITY = 'equity',
+  REVENUE = 'revenue',
+  EXPENSE = 'expense'
+}
+
+/**
+ * Account with hierarchical structure
+ */
+export interface Account {
+  id: string
+  name: string // e.g., "Expenses:Groceries:Organic"
+  account_type: AccountType
+  description?: string
+  user_id?: string
+  // Hierarchical metadata (added by frontend)
+  parent_account?: string
+  level?: number
+  has_children?: boolean
+}
+
+/**
+ * Account with user-specific permission metadata
+ * (Will be available once castle API implements permissions)
+ */
+export interface AccountWithPermissions extends Account {
+  user_permissions?: PermissionType[]
+  inherited_from?: string
+}
+
+/**
+ * Permission types for account access control
+ */
+export enum PermissionType {
+  READ = 'read',
+  SUBMIT_EXPENSE = 'submit_expense',
+  MANAGE = 'manage'
+}
+
+/**
+ * Expense entry request payload
+ */
+export interface ExpenseEntryRequest {
+  description: string
+  amount: number // In sats
+  expense_account: string // Account name or ID
+  is_equity: boolean
+  user_wallet: string
+  reference?: string
+  currency?: string // e.g., "USD"
+  entry_date?: string // ISO datetime string
+}
+
+/**
+ * Expense entry response from castle API
+ */
+export interface ExpenseEntry {
+  id: string
+  journal_id: string
+  description: string
+  amount: number
+  expense_account: string
+  is_equity: boolean
+  user_wallet: string
+  reference?: string
+  currency?: string
+  entry_date: string
+  created_at: string
+  status: 'pending' | 'approved' | 'rejected' | 'void'
+}
+
+/**
+ * Hierarchical account tree node for UI rendering
+ */
+export interface AccountNode {
+  account: Account
+  children: AccountNode[]
+}
+
+/**
+ * Module configuration
+ */
+export interface ExpensesConfig {
+  apiConfig: {
+    baseUrl: string
+    timeout: number
+  }
+}

From 00a99995c91ca326d7096a68911b1c14aaaa679c Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 7 Nov 2025 16:29:50 +0100
Subject: [PATCH 04/32] Enhances expense submission with user wallet

Updates expense submission to require a user wallet.

Retrieves wallet information from the authentication context
and includes it in the expense submission request to the backend.
This ensures that expenses are correctly associated with the user's
wallet, enabling accurate tracking and management of expenses.
Also adds error handling and user feedback.
---
 .../expenses/components/AccountSelector.vue   | 11 ++-
 .../expenses/components/AddExpense.vue        | 23 +++++-
 src/modules/expenses/services/ExpensesAPI.ts  | 72 +++++--------------
 3 files changed, 47 insertions(+), 59 deletions(-)

diff --git a/src/modules/expenses/components/AccountSelector.vue b/src/modules/expenses/components/AccountSelector.vue
index ec49ed3..18d6c3b 100644
--- a/src/modules/expenses/components/AccountSelector.vue
+++ b/src/modules/expenses/components/AccountSelector.vue
@@ -151,6 +151,7 @@ import {
   Check
 } from 'lucide-vue-next'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import { useAuth } from '@/composables/useAuthService'
 import type { ExpensesAPI } from '../services/ExpensesAPI'
 import type { Account, AccountNode } from '../types'
 
@@ -167,8 +168,9 @@ interface Emits {
 const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
-// Inject services
+// Inject services and composables
 const expensesAPI = injectService<ExpensesAPI>(SERVICE_TOKENS.EXPENSES_API)
+const { user } = useAuth()
 
 // Component state
 const isLoading = ref(false)
@@ -204,7 +206,14 @@ async function loadAccounts() {
   error.value = null
 
   try {
+    // Get wallet key from first wallet (invoice key for read operations)
+    const wallet = user.value?.wallets?.[0]
+    if (!wallet || !wallet.inkey) {
+      throw new Error('No wallet available. Please log in.')
+    }
+
     accountHierarchy.value = await expensesAPI.getAccountHierarchy(
+      wallet.inkey,
       props.rootAccount
     )
   } catch (err) {
diff --git a/src/modules/expenses/components/AddExpense.vue b/src/modules/expenses/components/AddExpense.vue
index 6b24130..e6e09c2 100644
--- a/src/modules/expenses/components/AddExpense.vue
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -197,6 +197,8 @@ import {
 } from '@/components/ui/form'
 import { DollarSign, X, ChevronLeft, Loader2 } from 'lucide-vue-next'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import { useAuth } from '@/composables/useAuthService'
+import { useToast } from '@/core/composables/useToast'
 import type { ExpensesAPI } from '../services/ExpensesAPI'
 import type { Account } from '../types'
 import AccountSelector from './AccountSelector.vue'
@@ -209,8 +211,10 @@ interface Emits {
 
 const emit = defineEmits<Emits>()
 
-// Inject services
+// Inject services and composables
 const expensesAPI = injectService<ExpensesAPI>(SERVICE_TOKENS.EXPENSES_API)
+const { user } = useAuth()
+const toast = useToast()
 
 // Component state
 const currentStep = ref(1)
@@ -255,22 +259,33 @@ function handleAccountSelected(account: Account) {
 const onSubmit = form.handleSubmit(async (values) => {
   if (!selectedAccount.value) {
     console.error('[AddExpense] No account selected')
+    toast.error('No account selected', { description: 'Please select an account first' })
+    return
+  }
+
+  // Get wallet key from first wallet (invoice key for submission)
+  const wallet = user.value?.wallets?.[0]
+  if (!wallet || !wallet.inkey) {
+    toast.error('No wallet available', { description: 'Please log in to submit expenses' })
     return
   }
 
   isSubmitting.value = true
 
   try {
-    await expensesAPI.submitExpense({
+    await expensesAPI.submitExpense(wallet.inkey, {
       description: values.description,
       amount: values.amount,
       expense_account: selectedAccount.value.name,
       is_equity: values.isEquity,
-      user_wallet: '', // Will be filled by backend from auth
+      user_wallet: wallet.id,
       reference: values.reference,
       currency: 'sats'
     })
 
+    // Show success message
+    toast.success('Expense submitted', { description: 'Your expense is pending admin approval' })
+
     // Reset form and close
     resetForm()
     selectedAccount.value = null
@@ -281,6 +296,8 @@ const onSubmit = form.handleSubmit(async (values) => {
     emit('close')
   } catch (error) {
     console.error('[AddExpense] Error submitting expense:', error)
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error'
+    toast.error('Submission failed', { description: errorMessage })
   } finally {
     isSubmitting.value = false
   }
diff --git a/src/modules/expenses/services/ExpensesAPI.ts b/src/modules/expenses/services/ExpensesAPI.ts
index 0646bc7..e03d36e 100644
--- a/src/modules/expenses/services/ExpensesAPI.ts
+++ b/src/modules/expenses/services/ExpensesAPI.ts
@@ -15,7 +15,7 @@ export class ExpensesAPI extends BaseService {
   protected readonly metadata = {
     name: 'ExpensesAPI',
     version: '1.0.0',
-    dependencies: ['AuthService', 'ToastService']
+    dependencies: [] // No dependencies - wallet key is passed as parameter
   }
 
   private get config() {
@@ -34,18 +34,9 @@ export class ExpensesAPI extends BaseService {
   }
 
   /**
-   * Get authentication headers
+   * Get authentication headers with provided wallet key
    */
-  private getHeaders(): HeadersInit {
-    if (!this.authService) {
-      throw new Error('AuthService not available')
-    }
-
-    const walletKey = this.authService.walletKey
-    if (!walletKey) {
-      throw new Error('Wallet key not available. Please log in.')
-    }
-
+  private getHeaders(walletKey: string): HeadersInit {
     return {
       'Content-Type': 'application/json',
       'X-Api-Key': walletKey
@@ -58,11 +49,11 @@ export class ExpensesAPI extends BaseService {
    * Note: Currently returns all accounts. Once castle API implements
    * user permissions, use filter_by_user=true parameter.
    */
-  async getAccounts(): Promise<Account[]> {
+  async getAccounts(walletKey: string): Promise<Account[]> {
     try {
-      const response = await fetch(`${this.baseUrl}/api/v1/accounts`, {
+      const response = await fetch(`${this.baseUrl}/castle/api/v1/accounts`, {
         method: 'GET',
-        headers: this.getHeaders(),
+        headers: this.getHeaders(walletKey),
         signal: AbortSignal.timeout(this.config?.apiConfig?.timeout || 30000)
       })
 
@@ -74,11 +65,6 @@ export class ExpensesAPI extends BaseService {
       return accounts as Account[]
     } catch (error) {
       console.error('[ExpensesAPI] Error fetching accounts:', error)
-      if (this.toastService) {
-        this.toastService.error('Failed to load accounts', {
-          description: error instanceof Error ? error.message : 'Unknown error'
-        })
-      }
       throw error
     }
   }
@@ -89,8 +75,8 @@ export class ExpensesAPI extends BaseService {
    * Converts flat account list to nested tree based on colon-separated names
    * e.g., "Expenses:Groceries:Organic" becomes nested structure
    */
-  async getAccountHierarchy(rootAccount?: string): Promise<AccountNode[]> {
-    const accounts = await this.getAccounts()
+  async getAccountHierarchy(walletKey: string, rootAccount?: string): Promise<AccountNode[]> {
+    const accounts = await this.getAccounts(walletKey)
 
     // Filter by root account if specified
     let filteredAccounts = accounts
@@ -151,11 +137,11 @@ export class ExpensesAPI extends BaseService {
   /**
    * Submit expense entry to castle
    */
-  async submitExpense(request: ExpenseEntryRequest): Promise<ExpenseEntry> {
+  async submitExpense(walletKey: string, request: ExpenseEntryRequest): Promise<ExpenseEntry> {
     try {
-      const response = await fetch(`${this.baseUrl}/api/v1/entries/expense`, {
+      const response = await fetch(`${this.baseUrl}/castle/api/v1/entries/expense`, {
         method: 'POST',
-        headers: this.getHeaders(),
+        headers: this.getHeaders(walletKey),
         body: JSON.stringify(request),
         signal: AbortSignal.timeout(this.config?.apiConfig?.timeout || 30000)
       })
@@ -168,28 +154,9 @@ export class ExpensesAPI extends BaseService {
       }
 
       const entry = await response.json()
-
-      if (this.toastService) {
-        this.toastService.success('Expense submitted', {
-          description: 'Your expense is pending admin approval'
-        })
-      }
-
       return entry as ExpenseEntry
     } catch (error) {
       console.error('[ExpensesAPI] Error submitting expense:', error)
-
-      let errorMessage = 'Failed to submit expense'
-      if (error instanceof Error) {
-        errorMessage = error.message
-      }
-
-      if (this.toastService) {
-        this.toastService.error('Submission failed', {
-          description: errorMessage
-        })
-      }
-
       throw error
     }
   }
@@ -197,11 +164,11 @@ export class ExpensesAPI extends BaseService {
   /**
    * Get user's expense entries
    */
-  async getUserExpenses(): Promise<ExpenseEntry[]> {
+  async getUserExpenses(walletKey: string): Promise<ExpenseEntry[]> {
     try {
-      const response = await fetch(`${this.baseUrl}/api/v1/entries/user`, {
+      const response = await fetch(`${this.baseUrl}/castle/api/v1/entries/user`, {
         method: 'GET',
-        headers: this.getHeaders(),
+        headers: this.getHeaders(walletKey),
         signal: AbortSignal.timeout(this.config?.apiConfig?.timeout || 30000)
       })
 
@@ -215,11 +182,6 @@ export class ExpensesAPI extends BaseService {
       return entries as ExpenseEntry[]
     } catch (error) {
       console.error('[ExpensesAPI] Error fetching user expenses:', error)
-      if (this.toastService) {
-        this.toastService.error('Failed to load expenses', {
-          description: error instanceof Error ? error.message : 'Unknown error'
-        })
-      }
       throw error
     }
   }
@@ -227,11 +189,11 @@ export class ExpensesAPI extends BaseService {
   /**
    * Get user's balance with castle
    */
-  async getUserBalance(): Promise<{ balance: number; currency: string }> {
+  async getUserBalance(walletKey: string): Promise<{ balance: number; currency: string }> {
     try {
-      const response = await fetch(`${this.baseUrl}/api/v1/balance`, {
+      const response = await fetch(`${this.baseUrl}/castle/api/v1/balance`, {
         method: 'GET',
-        headers: this.getHeaders(),
+        headers: this.getHeaders(walletKey),
         signal: AbortSignal.timeout(this.config?.apiConfig?.timeout || 30000)
       })
 

From e745caffaa92d301e84bcce5382e19347aeb8da4 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 7 Nov 2025 16:36:56 +0100
Subject: [PATCH 05/32] Updates "account from equity" label

Changes the "Account from equity" label and description
to "Convert to equity contribution" for clarity.

The updated description explains that instead of cash
reimbursement, the expense will increase the user's
equity stake.
---
 src/modules/expenses/components/AddExpense.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/expenses/components/AddExpense.vue b/src/modules/expenses/components/AddExpense.vue
index e6e09c2..fd911cd 100644
--- a/src/modules/expenses/components/AddExpense.vue
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -114,7 +114,7 @@
             </FormItem>
           </FormField>
 
-          <!-- Account from equity checkbox -->
+          <!-- Convert to equity checkbox -->
           <FormField v-slot="{ value, handleChange }" name="isEquity">
             <FormItem>
               <div class="flex items-center space-x-2">
@@ -126,9 +126,9 @@
                   />
                 </FormControl>
                 <div class="space-y-1 leading-none">
-                  <FormLabel>Account from equity</FormLabel>
+                  <FormLabel>Convert to equity contribution</FormLabel>
                   <FormDescription>
-                    Check if this expense should be accounted from your equity
+                    Instead of cash reimbursement, increase your equity stake by this amount
                   </FormDescription>
                 </div>
               </div>

From 6ecaafb6336bada296e50a1660b00926808ed0c5 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 7 Nov 2025 17:51:34 +0100
Subject: [PATCH 06/32] Adds permission management components

Implements components for granting and revoking account permissions.

This introduces a `GrantPermissionDialog` for assigning access rights to users,
and a `PermissionManager` component to list and revoke existing permissions.
The UI provides options to view permissions grouped by user or by account.
---
 .../admin/GrantPermissionDialog.vue           | 256 +++++++++++
 .../components/admin/PermissionManager.vue    | 399 ++++++++++++++++++
 2 files changed, 655 insertions(+)
 create mode 100644 src/modules/expenses/components/admin/GrantPermissionDialog.vue
 create mode 100644 src/modules/expenses/components/admin/PermissionManager.vue

diff --git a/src/modules/expenses/components/admin/GrantPermissionDialog.vue b/src/modules/expenses/components/admin/GrantPermissionDialog.vue
new file mode 100644
index 0000000..20e7d87
--- /dev/null
+++ b/src/modules/expenses/components/admin/GrantPermissionDialog.vue
@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import { useAuth } from '@/composables/useAuthService'
+import { useToast } from '@/core/composables/useToast'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import type { ExpensesAPI } from '../../services/ExpensesAPI'
+import type { Account } from '../../types'
+import { PermissionType } from '../../types'
+
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Textarea } from '@/components/ui/textarea'
+import { Loader2 } from 'lucide-vue-next'
+
+interface Props {
+  isOpen: boolean
+  accounts: Account[]
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  close: []
+  permissionGranted: []
+}>()
+
+const { user } = useAuth()
+const toast = useToast()
+const expensesAPI = injectService<ExpensesAPI>(SERVICE_TOKENS.EXPENSES_API)
+
+const isGranting = ref(false)
+
+const adminKey = computed(() => user.value?.wallets?.[0]?.adminkey)
+
+// Form schema
+const formSchema = toTypedSchema(
+  z.object({
+    user_id: z.string().min(1, 'User ID is required'),
+    account_id: z.string().min(1, 'Account is required'),
+    permission_type: z.nativeEnum(PermissionType, {
+      errorMap: () => ({ message: 'Permission type is required' })
+    }),
+    notes: z.string().optional(),
+    expires_at: z.string().optional()
+  })
+)
+
+// Setup form
+const form = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    user_id: '',
+    account_id: '',
+    permission_type: PermissionType.READ,
+    notes: '',
+    expires_at: ''
+  }
+})
+
+const { resetForm, meta } = form
+const isFormValid = computed(() => meta.value.valid)
+
+// Permission type options
+const permissionTypes = [
+  { value: PermissionType.READ, label: 'Read', description: 'View account and balance' },
+  {
+    value: PermissionType.SUBMIT_EXPENSE,
+    label: 'Submit Expense',
+    description: 'Submit expenses to this account'
+  },
+  { value: PermissionType.MANAGE, label: 'Manage', description: 'Full account management' }
+]
+
+// Submit form
+const onSubmit = form.handleSubmit(async (values) => {
+  if (!adminKey.value) {
+    toast.error('Admin access required')
+    return
+  }
+
+  isGranting.value = true
+
+  try {
+    await expensesAPI.grantPermission(adminKey.value, {
+      user_id: values.user_id,
+      account_id: values.account_id,
+      permission_type: values.permission_type,
+      notes: values.notes || undefined,
+      expires_at: values.expires_at || undefined
+    })
+
+    emit('permissionGranted')
+    resetForm()
+  } catch (error) {
+    console.error('Failed to grant permission:', error)
+    toast.error('Failed to grant permission', {
+      description: error instanceof Error ? error.message : 'Unknown error'
+    })
+  } finally {
+    isGranting.value = false
+  }
+})
+
+// Handle dialog close
+function handleClose() {
+  if (!isGranting.value) {
+    resetForm()
+    emit('close')
+  }
+}
+</script>
+
+<template>
+  <Dialog :open="props.isOpen" @update:open="handleClose">
+    <DialogContent class="sm:max-w-[500px]">
+      <DialogHeader>
+        <DialogTitle>Grant Account Permission</DialogTitle>
+        <DialogDescription>
+          Grant a user permission to access an expense account. Permissions on parent accounts
+          cascade to children.
+        </DialogDescription>
+      </DialogHeader>
+
+      <form @submit="onSubmit" class="space-y-4">
+        <!-- User ID -->
+        <FormField v-slot="{ componentField }" name="user_id">
+          <FormItem>
+            <FormLabel>User ID *</FormLabel>
+            <FormControl>
+              <Input
+                placeholder="Enter user wallet ID"
+                v-bind="componentField"
+                :disabled="isGranting"
+              />
+            </FormControl>
+            <FormDescription>The wallet ID of the user to grant permission to</FormDescription>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <!-- Account -->
+        <FormField v-slot="{ componentField }" name="account_id">
+          <FormItem>
+            <FormLabel>Account *</FormLabel>
+            <Select v-bind="componentField" :disabled="isGranting">
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select account" />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                <SelectItem
+                  v-for="account in props.accounts"
+                  :key="account.id"
+                  :value="account.id"
+                >
+                  {{ account.name }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <FormDescription>Account to grant access to</FormDescription>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <!-- Permission Type -->
+        <FormField v-slot="{ componentField }" name="permission_type">
+          <FormItem>
+            <FormLabel>Permission Type *</FormLabel>
+            <Select v-bind="componentField" :disabled="isGranting">
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select permission type" />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                <SelectItem
+                  v-for="type in permissionTypes"
+                  :key="type.value"
+                  :value="type.value"
+                >
+                  <div>
+                    <div class="font-medium">{{ type.label }}</div>
+                    <div class="text-sm text-muted-foreground">{{ type.description }}</div>
+                  </div>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <FormDescription>Type of permission to grant</FormDescription>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <!-- Expiration Date (Optional) -->
+        <FormField v-slot="{ componentField }" name="expires_at">
+          <FormItem>
+            <FormLabel>Expiration Date (Optional)</FormLabel>
+            <FormControl>
+              <Input
+                type="datetime-local"
+                v-bind="componentField"
+                :disabled="isGranting"
+              />
+            </FormControl>
+            <FormDescription>Leave empty for permanent access</FormDescription>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <!-- Notes (Optional) -->
+        <FormField v-slot="{ componentField }" name="notes">
+          <FormItem>
+            <FormLabel>Notes (Optional)</FormLabel>
+            <FormControl>
+              <Textarea
+                placeholder="Add notes about this permission..."
+                v-bind="componentField"
+                :disabled="isGranting"
+              />
+            </FormControl>
+            <FormDescription>Optional notes for admin reference</FormDescription>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="outline"
+            @click="handleClose"
+            :disabled="isGranting"
+          >
+            Cancel
+          </Button>
+          <Button type="submit" :disabled="isGranting || !isFormValid">
+            <Loader2 v-if="isGranting" class="mr-2 h-4 w-4 animate-spin" />
+            {{ isGranting ? 'Granting...' : 'Grant Permission' }}
+          </Button>
+        </DialogFooter>
+      </form>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/src/modules/expenses/components/admin/PermissionManager.vue b/src/modules/expenses/components/admin/PermissionManager.vue
new file mode 100644
index 0000000..99eac98
--- /dev/null
+++ b/src/modules/expenses/components/admin/PermissionManager.vue
@@ -0,0 +1,399 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useAuth } from '@/composables/useAuthService'
+import { useToast } from '@/core/composables/useToast'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import type { ExpensesAPI } from '../../services/ExpensesAPI'
+import type { AccountPermission, Account } from '../../types'
+import { PermissionType } from '../../types'
+
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Badge } from '@/components/ui/badge'
+import { Loader2, Plus, Trash2, Users, Shield } from 'lucide-vue-next'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@/components/ui/alert-dialog'
+
+import GrantPermissionDialog from './GrantPermissionDialog.vue'
+
+const { user } = useAuth()
+const toast = useToast()
+const expensesAPI = injectService<ExpensesAPI>(SERVICE_TOKENS.EXPENSES_API)
+
+const permissions = ref<AccountPermission[]>([])
+const accounts = ref<Account[]>([])
+const isLoading = ref(false)
+const showGrantDialog = ref(false)
+const permissionToRevoke = ref<AccountPermission | null>(null)
+const showRevokeDialog = ref(false)
+
+const adminKey = computed(() => user.value?.wallets?.[0]?.adminkey)
+
+// Get permission type badge variant
+function getPermissionBadge(type: PermissionType) {
+  switch (type) {
+    case PermissionType.READ:
+      return 'default'
+    case PermissionType.SUBMIT_EXPENSE:
+      return 'secondary'
+    case PermissionType.MANAGE:
+      return 'destructive'
+    default:
+      return 'outline'
+  }
+}
+
+// Get permission type label
+function getPermissionLabel(type: PermissionType): string {
+  switch (type) {
+    case PermissionType.READ:
+      return 'Read'
+    case PermissionType.SUBMIT_EXPENSE:
+      return 'Submit Expense'
+    case PermissionType.MANAGE:
+      return 'Manage'
+    default:
+      return type
+  }
+}
+
+// Get account name by ID
+function getAccountName(accountId: string): string {
+  const account = accounts.value.find((a) => a.id === accountId)
+  return account?.name || accountId
+}
+
+// Format date
+function formatDate(dateString: string): string {
+  const date = new Date(dateString)
+  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
+}
+
+// Load accounts
+async function loadAccounts() {
+  if (!adminKey.value) return
+
+  try {
+    accounts.value = await expensesAPI.getAccounts(adminKey.value)
+  } catch (error) {
+    console.error('Failed to load accounts:', error)
+    toast.error('Failed to load accounts', {
+      description: error instanceof Error ? error.message : 'Unknown error'
+    })
+  }
+}
+
+// Load all permissions
+async function loadPermissions() {
+  if (!adminKey.value) {
+    toast.error('Admin access required', {
+      description: 'You need admin privileges to manage permissions'
+    })
+    return
+  }
+
+  isLoading.value = true
+  try {
+    permissions.value = await expensesAPI.listPermissions(adminKey.value)
+  } catch (error) {
+    console.error('Failed to load permissions:', error)
+    toast.error('Failed to load permissions', {
+      description: error instanceof Error ? error.message : 'Unknown error'
+    })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Handle permission granted
+function handlePermissionGranted() {
+  showGrantDialog.value = false
+  loadPermissions()
+  toast.success('Permission granted', {
+    description: 'User permission has been successfully granted'
+  })
+}
+
+// Confirm revoke permission
+function confirmRevoke(permission: AccountPermission) {
+  permissionToRevoke.value = permission
+  showRevokeDialog.value = true
+}
+
+// Revoke permission
+async function revokePermission() {
+  if (!adminKey.value || !permissionToRevoke.value) return
+
+  try {
+    await expensesAPI.revokePermission(adminKey.value, permissionToRevoke.value.id)
+    toast.success('Permission revoked', {
+      description: 'User permission has been successfully revoked'
+    })
+    loadPermissions()
+  } catch (error) {
+    console.error('Failed to revoke permission:', error)
+    toast.error('Failed to revoke permission', {
+      description: error instanceof Error ? error.message : 'Unknown error'
+    })
+  } finally {
+    showRevokeDialog.value = false
+    permissionToRevoke.value = null
+  }
+}
+
+// Group permissions by user
+const permissionsByUser = computed(() => {
+  const grouped = new Map<string, AccountPermission[]>()
+
+  for (const permission of permissions.value) {
+    const existing = grouped.get(permission.user_id) || []
+    existing.push(permission)
+    grouped.set(permission.user_id, existing)
+  }
+
+  return grouped
+})
+
+// Group permissions by account
+const permissionsByAccount = computed(() => {
+  const grouped = new Map<string, AccountPermission[]>()
+
+  for (const permission of permissions.value) {
+    const existing = grouped.get(permission.account_id) || []
+    existing.push(permission)
+    grouped.set(permission.account_id, existing)
+  }
+
+  return grouped
+})
+
+onMounted(() => {
+  loadAccounts()
+  loadPermissions()
+})
+</script>
+
+<template>
+  <div class="container mx-auto p-6 space-y-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-3xl font-bold">Permission Management</h1>
+        <p class="text-muted-foreground">
+          Manage user access to expense accounts
+        </p>
+      </div>
+      <Button @click="showGrantDialog = true" :disabled="isLoading">
+        <Plus class="mr-2 h-4 w-4" />
+        Grant Permission
+      </Button>
+    </div>
+
+    <Card>
+      <CardHeader>
+        <CardTitle class="flex items-center gap-2">
+          <Shield class="h-5 w-5" />
+          Account Permissions
+        </CardTitle>
+        <CardDescription>
+          View and manage all account permissions. Permissions on parent accounts cascade to
+          children.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Tabs default-value="by-user" class="w-full">
+          <TabsList class="grid w-full grid-cols-2">
+            <TabsTrigger value="by-user">
+              <Users class="mr-2 h-4 w-4" />
+              By User
+            </TabsTrigger>
+            <TabsTrigger value="by-account">
+              <Shield class="mr-2 h-4 w-4" />
+              By Account
+            </TabsTrigger>
+          </TabsList>
+
+          <!-- By User View -->
+          <TabsContent value="by-user" class="space-y-4">
+            <div v-if="isLoading" class="flex items-center justify-center py-8">
+              <Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
+            </div>
+
+            <div v-else-if="permissionsByUser.size === 0" class="text-center py-8">
+              <p class="text-muted-foreground">No permissions granted yet</p>
+            </div>
+
+            <div v-else class="space-y-4">
+              <div
+                v-for="[userId, userPermissions] in permissionsByUser"
+                :key="userId"
+                class="border rounded-lg p-4"
+              >
+                <h3 class="font-semibold mb-2">User: {{ userId }}</h3>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Account</TableHead>
+                      <TableHead>Permission</TableHead>
+                      <TableHead>Granted</TableHead>
+                      <TableHead>Expires</TableHead>
+                      <TableHead>Notes</TableHead>
+                      <TableHead class="text-right">Actions</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    <TableRow v-for="permission in userPermissions" :key="permission.id">
+                      <TableCell class="font-medium">
+                        {{ getAccountName(permission.account_id) }}
+                      </TableCell>
+                      <TableCell>
+                        <Badge :variant="getPermissionBadge(permission.permission_type)">
+                          {{ getPermissionLabel(permission.permission_type) }}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>{{ formatDate(permission.granted_at) }}</TableCell>
+                      <TableCell>
+                        {{ permission.expires_at ? formatDate(permission.expires_at) : 'Never' }}
+                      </TableCell>
+                      <TableCell>
+                        <span class="text-sm text-muted-foreground">
+                          {{ permission.notes || '-' }}
+                        </span>
+                      </TableCell>
+                      <TableCell class="text-right">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          @click="confirmRevoke(permission)"
+                          :disabled="isLoading"
+                        >
+                          <Trash2 class="h-4 w-4 text-destructive" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </div>
+            </div>
+          </TabsContent>
+
+          <!-- By Account View -->
+          <TabsContent value="by-account" class="space-y-4">
+            <div v-if="isLoading" class="flex items-center justify-center py-8">
+              <Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
+            </div>
+
+            <div v-else-if="permissionsByAccount.size === 0" class="text-center py-8">
+              <p class="text-muted-foreground">No permissions granted yet</p>
+            </div>
+
+            <div v-else class="space-y-4">
+              <div
+                v-for="[accountId, accountPermissions] in permissionsByAccount"
+                :key="accountId"
+                class="border rounded-lg p-4"
+              >
+                <h3 class="font-semibold mb-2">Account: {{ getAccountName(accountId) }}</h3>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>User</TableHead>
+                      <TableHead>Permission</TableHead>
+                      <TableHead>Granted</TableHead>
+                      <TableHead>Expires</TableHead>
+                      <TableHead>Notes</TableHead>
+                      <TableHead class="text-right">Actions</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    <TableRow v-for="permission in accountPermissions" :key="permission.id">
+                      <TableCell class="font-medium">{{ permission.user_id }}</TableCell>
+                      <TableCell>
+                        <Badge :variant="getPermissionBadge(permission.permission_type)">
+                          {{ getPermissionLabel(permission.permission_type) }}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>{{ formatDate(permission.granted_at) }}</TableCell>
+                      <TableCell>
+                        {{ permission.expires_at ? formatDate(permission.expires_at) : 'Never' }}
+                      </TableCell>
+                      <TableCell>
+                        <span class="text-sm text-muted-foreground">
+                          {{ permission.notes || '-' }}
+                        </span>
+                      </TableCell>
+                      <TableCell class="text-right">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          @click="confirmRevoke(permission)"
+                          :disabled="isLoading"
+                        >
+                          <Trash2 class="h-4 w-4 text-destructive" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </div>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </CardContent>
+    </Card>
+
+    <!-- Grant Permission Dialog -->
+    <GrantPermissionDialog
+      :is-open="showGrantDialog"
+      :accounts="accounts"
+      @close="showGrantDialog = false"
+      @permission-granted="handlePermissionGranted"
+    />
+
+    <!-- Revoke Confirmation Dialog -->
+    <AlertDialog :open="showRevokeDialog" @update:open="showRevokeDialog = $event">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Revoke Permission?</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to revoke this permission? The user will immediately lose access.
+            <div v-if="permissionToRevoke" class="mt-4 p-4 bg-muted rounded-md">
+              <p class="font-medium">Permission Details:</p>
+              <p class="text-sm mt-2">
+                <strong>User:</strong> {{ permissionToRevoke.user_id }}
+              </p>
+              <p class="text-sm">
+                <strong>Account:</strong> {{ getAccountName(permissionToRevoke.account_id) }}
+              </p>
+              <p class="text-sm">
+                <strong>Type:</strong> {{ getPermissionLabel(permissionToRevoke.permission_type) }}
+              </p>
+            </div>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction @click="revokePermission" class="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+            Revoke
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  </div>
+</template>

From 9c8b696f065307fac898f39a225aed52b0354d5c Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 7 Nov 2025 21:36:22 +0100
Subject: [PATCH 07/32] Updates expense input to EUR
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updates the expense input fields to accept and display amounts in Euros instead of satoshis.

This change ensures that the amount field is configured to handle decimal values with a minimum value of €0.01.
---
 src/modules/expenses/components/AddExpense.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/modules/expenses/components/AddExpense.vue b/src/modules/expenses/components/AddExpense.vue
index fd911cd..c53f123 100644
--- a/src/modules/expenses/components/AddExpense.vue
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -80,18 +80,18 @@
           <!-- Amount -->
           <FormField v-slot="{ componentField }" name="amount">
             <FormItem>
-              <FormLabel>Amount (sats) *</FormLabel>
+              <FormLabel>Amount (EUR) *</FormLabel>
               <FormControl>
                 <Input
                   type="number"
-                  placeholder="0"
+                  placeholder="0.00"
                   v-bind="componentField"
-                  min="1"
-                  step="1"
+                  min="0.01"
+                  step="0.01"
                 />
               </FormControl>
               <FormDescription>
-                Amount in satoshis
+                Amount in Euros
               </FormDescription>
               <FormMessage />
             </FormItem>
@@ -225,7 +225,7 @@ const isSubmitting = ref(false)
 const formSchema = toTypedSchema(
   z.object({
     description: z.string().min(1, 'Description is required').max(500, 'Description too long'),
-    amount: z.coerce.number().min(1, 'Amount must be at least 1 sat'),
+    amount: z.coerce.number().min(0.01, 'Amount must be at least €0.01'),
     reference: z.string().max(100, 'Reference too long').optional(),
     isEquity: z.boolean().default(false)
   })
@@ -280,7 +280,7 @@ const onSubmit = form.handleSubmit(async (values) => {
       is_equity: values.isEquity,
       user_wallet: wallet.id,
       reference: values.reference,
-      currency: 'sats'
+      currency: 'EUR'
     })
 
     // Show success message

From 8dad92f0e5fae9f7494b3ceae3cf0fcaee233994 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 7 Nov 2025 21:39:16 +0100
Subject: [PATCH 08/32] Enables currency selection for expenses

Allows users to select a currency when adding an expense.

Fetches available currencies from the backend and displays them
in a dropdown menu, defaulting to EUR if the fetch fails.
The expense submission process now includes the selected currency.
---
 .../expenses/components/AddExpense.vue        | 66 +++++++++++++++++--
 src/modules/expenses/services/ExpensesAPI.ts  | 21 ++++++
 2 files changed, 82 insertions(+), 5 deletions(-)

diff --git a/src/modules/expenses/components/AddExpense.vue b/src/modules/expenses/components/AddExpense.vue
index c53f123..48e0950 100644
--- a/src/modules/expenses/components/AddExpense.vue
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -80,7 +80,7 @@
           <!-- Amount -->
           <FormField v-slot="{ componentField }" name="amount">
             <FormItem>
-              <FormLabel>Amount (EUR) *</FormLabel>
+              <FormLabel>Amount *</FormLabel>
               <FormControl>
                 <Input
                   type="number"
@@ -91,7 +91,34 @@
                 />
               </FormControl>
               <FormDescription>
-                Amount in Euros
+                Amount in selected currency
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <!-- Currency -->
+          <FormField v-slot="{ componentField }" name="currency">
+            <FormItem>
+              <FormLabel>Currency *</FormLabel>
+              <Select v-bind="componentField">
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select currency" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem
+                    v-for="currency in availableCurrencies"
+                    :key="currency"
+                    :value="currency"
+                  >
+                    {{ currency }}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+              <FormDescription>
+                Currency for this expense
               </FormDescription>
               <FormMessage />
             </FormItem>
@@ -179,7 +206,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
@@ -195,6 +222,13 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import { DollarSign, X, ChevronLeft, Loader2 } from 'lucide-vue-next'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import { useAuth } from '@/composables/useAuthService'
@@ -220,12 +254,15 @@ const toast = useToast()
 const currentStep = ref(1)
 const selectedAccount = ref<Account | null>(null)
 const isSubmitting = ref(false)
+const availableCurrencies = ref<string[]>([])
+const loadingCurrencies = ref(true)
 
 // Form schema
 const formSchema = toTypedSchema(
   z.object({
     description: z.string().min(1, 'Description is required').max(500, 'Description too long'),
-    amount: z.coerce.number().min(0.01, 'Amount must be at least €0.01'),
+    amount: z.coerce.number().min(0.01, 'Amount must be at least 0.01'),
+    currency: z.string().min(1, 'Currency is required'),
     reference: z.string().max(100, 'Reference too long').optional(),
     isEquity: z.boolean().default(false)
   })
@@ -237,6 +274,7 @@ const form = useForm({
   initialValues: {
     description: '',
     amount: 0,
+    currency: 'EUR',
     reference: '',
     isEquity: false
   }
@@ -245,6 +283,24 @@ const form = useForm({
 const { resetForm, meta } = form
 const isFormValid = computed(() => meta.value.valid)
 
+/**
+ * Fetch available currencies on component mount
+ */
+onMounted(async () => {
+  try {
+    loadingCurrencies.value = true
+    const currencies = await expensesAPI.getCurrencies()
+    availableCurrencies.value = currencies
+    console.log('[AddExpense] Loaded currencies:', currencies)
+  } catch (error) {
+    console.error('[AddExpense] Failed to load currencies:', error)
+    toast.error('Failed to load currencies', { description: 'Please check your connection and try again' })
+    availableCurrencies.value = []
+  } finally {
+    loadingCurrencies.value = false
+  }
+})
+
 /**
  * Handle account selection
  */
@@ -280,7 +336,7 @@ const onSubmit = form.handleSubmit(async (values) => {
       is_equity: values.isEquity,
       user_wallet: wallet.id,
       reference: values.reference,
-      currency: 'EUR'
+      currency: values.currency
     })
 
     // Show success message
diff --git a/src/modules/expenses/services/ExpensesAPI.ts b/src/modules/expenses/services/ExpensesAPI.ts
index e03d36e..4342c43 100644
--- a/src/modules/expenses/services/ExpensesAPI.ts
+++ b/src/modules/expenses/services/ExpensesAPI.ts
@@ -207,4 +207,25 @@ export class ExpensesAPI extends BaseService {
       throw error
     }
   }
+
+  /**
+   * Get available currencies from LNbits instance
+   */
+  async getCurrencies(): Promise<string[]> {
+    try {
+      const response = await fetch(`${this.baseUrl}/api/v1/currencies`, {
+        method: 'GET',
+        signal: AbortSignal.timeout(this.config?.apiConfig?.timeout || 30000)
+      })
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch currencies: ${response.statusText}`)
+      }
+
+      return await response.json()
+    } catch (error) {
+      console.error('[ExpensesAPI] Error fetching currencies:', error)
+      throw error
+    }
+  }
 }

From f6ecbc8faf411d29f775d342e322fa2143972241 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 7 Nov 2025 21:51:10 +0100
Subject: [PATCH 09/32] Fetches and sets default currency for expenses

Ensures the expense form defaults to the LNbits instance's configured currency.

This change retrieves the default currency from the LNbits API and sets it as the initial value in the expense form. If no default is configured, it falls back to the first available currency or EUR.
---
 .../expenses/components/AddExpense.vue        | 14 ++++++++++--
 src/modules/expenses/services/ExpensesAPI.ts  | 22 +++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/modules/expenses/components/AddExpense.vue b/src/modules/expenses/components/AddExpense.vue
index 48e0950..bcabb71 100644
--- a/src/modules/expenses/components/AddExpense.vue
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -274,7 +274,7 @@ const form = useForm({
   initialValues: {
     description: '',
     amount: 0,
-    currency: 'EUR',
+    currency: '', // Will be set dynamically from LNbits default currency
     reference: '',
     isEquity: false
   }
@@ -284,14 +284,24 @@ const { resetForm, meta } = form
 const isFormValid = computed(() => meta.value.valid)
 
 /**
- * Fetch available currencies on component mount
+ * Fetch available currencies and default currency on component mount
  */
 onMounted(async () => {
   try {
     loadingCurrencies.value = true
+
+    // Fetch available currencies
     const currencies = await expensesAPI.getCurrencies()
     availableCurrencies.value = currencies
     console.log('[AddExpense] Loaded currencies:', currencies)
+
+    // Fetch default currency
+    const defaultCurrency = await expensesAPI.getDefaultCurrency()
+
+    // Set default currency: use configured default, or first available currency, or 'EUR' as final fallback
+    const initialCurrency = defaultCurrency || currencies[0] || 'EUR'
+    form.setFieldValue('currency', initialCurrency)
+    console.log('[AddExpense] Default currency set to:', initialCurrency)
   } catch (error) {
     console.error('[AddExpense] Failed to load currencies:', error)
     toast.error('Failed to load currencies', { description: 'Please check your connection and try again' })
diff --git a/src/modules/expenses/services/ExpensesAPI.ts b/src/modules/expenses/services/ExpensesAPI.ts
index 4342c43..08fcd6e 100644
--- a/src/modules/expenses/services/ExpensesAPI.ts
+++ b/src/modules/expenses/services/ExpensesAPI.ts
@@ -228,4 +228,26 @@ export class ExpensesAPI extends BaseService {
       throw error
     }
   }
+
+  /**
+   * Get default currency from LNbits instance
+   */
+  async getDefaultCurrency(): Promise<string | null> {
+    try {
+      const response = await fetch(`${this.baseUrl}/api/v1/default-currency`, {
+        method: 'GET',
+        signal: AbortSignal.timeout(this.config?.apiConfig?.timeout || 30000)
+      })
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch default currency: ${response.statusText}`)
+      }
+
+      const data = await response.json()
+      return data.default_currency
+    } catch (error) {
+      console.error('[ExpensesAPI] Error fetching default currency:', error)
+      throw error
+    }
+  }
 }

From 358c3056c7d6f55041f47f88bc740be28d379652 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 7 Nov 2025 22:05:27 +0100
Subject: [PATCH 10/32] Wraps expense form in Dialog component

Refactors the AddExpense component to utilize the Dialog component
from the UI library. This provides a more structured and accessible
modal for adding expenses, and includes a header with title and description.
It also improves the layout using flexbox for better content management
and scrollability.
---
 .../expenses/components/AddExpense.vue        | 45 ++++++++++---------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/modules/expenses/components/AddExpense.vue b/src/modules/expenses/components/AddExpense.vue
index bcabb71..3ad6539 100644
--- a/src/modules/expenses/components/AddExpense.vue
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -1,22 +1,19 @@
 <template>
-  <div class="bg-card border border-border rounded-lg shadow-lg overflow-hidden">
-    <!-- Header -->
-    <div class="flex items-center justify-between p-4 border-b border-border">
-      <div class="flex items-center gap-2">
-        <DollarSign class="h-5 w-5 text-primary" />
-        <h3 class="font-semibold text-foreground">Add Expense</h3>
-      </div>
-      <Button
-        variant="ghost"
-        size="icon"
-        @click="$emit('close')"
-      >
-        <X class="h-4 w-4" />
-      </Button>
-    </div>
+  <Dialog :open="true" @update:open="(open) => !open && $emit('close')">
+    <DialogContent class="max-w-2xl max-h-[90vh] overflow-hidden flex flex-col p-0">
+      <!-- Header -->
+      <DialogHeader class="px-6 pt-6 pb-4 border-b">
+        <DialogTitle class="flex items-center gap-2">
+          <DollarSign class="h-5 w-5 text-primary" />
+          <span>Add Expense</span>
+        </DialogTitle>
+        <DialogDescription>
+          Submit an expense for admin approval
+        </DialogDescription>
+      </DialogHeader>
 
-    <!-- Form -->
-    <div class="p-4 space-y-4">
+      <!-- Scrollable Form Content -->
+      <div class="flex-1 overflow-y-auto px-6 py-4 space-y-4">
       <!-- Step indicator -->
       <div class="flex items-center justify-center gap-2 mb-4">
         <div
@@ -201,8 +198,9 @@
           </div>
         </form>
       </div>
-    </div>
-  </div>
+      </div>
+    </DialogContent>
+  </Dialog>
 </template>
 
 <script setup lang="ts">
@@ -229,7 +227,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { DollarSign, X, ChevronLeft, Loader2 } from 'lucide-vue-next'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { DollarSign, ChevronLeft, Loader2 } from 'lucide-vue-next'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import { useAuth } from '@/composables/useAuthService'
 import { useToast } from '@/core/composables/useToast'

From 0f795f9d18825cddd799f20f76e514911be7fa92 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 7 Nov 2025 22:06:58 +0100
Subject: [PATCH 11/32] Improves Add Expense dialog layout

Enhances the Add Expense dialog's layout for better usability.

Reduces the maximum height of the dialog, adjusts padding and margins,
and ensures scrollable content has a minimum height for a more consistent
user experience.
---
 src/modules/expenses/components/AddExpense.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/modules/expenses/components/AddExpense.vue b/src/modules/expenses/components/AddExpense.vue
index 3ad6539..75f9280 100644
--- a/src/modules/expenses/components/AddExpense.vue
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -1,8 +1,8 @@
 <template>
   <Dialog :open="true" @update:open="(open) => !open && $emit('close')">
-    <DialogContent class="max-w-2xl max-h-[90vh] overflow-hidden flex flex-col p-0">
+    <DialogContent class="max-w-2xl max-h-[85vh] my-4 overflow-hidden flex flex-col p-0 gap-0">
       <!-- Header -->
-      <DialogHeader class="px-6 pt-6 pb-4 border-b">
+      <DialogHeader class="px-6 pt-6 pb-4 border-b shrink-0">
         <DialogTitle class="flex items-center gap-2">
           <DollarSign class="h-5 w-5 text-primary" />
           <span>Add Expense</span>
@@ -13,7 +13,7 @@
       </DialogHeader>
 
       <!-- Scrollable Form Content -->
-      <div class="flex-1 overflow-y-auto px-6 py-4 space-y-4">
+      <div class="flex-1 overflow-y-auto px-6 py-4 space-y-4 min-h-0">
       <!-- Step indicator -->
       <div class="flex items-center justify-center gap-2 mb-4">
         <div
@@ -173,7 +173,7 @@
           </div>
 
           <!-- Action buttons -->
-          <div class="flex items-center gap-2 pt-2">
+          <div class="flex items-center gap-2 pt-2 pb-6">
             <Button
               type="button"
               variant="outline"

From 53c14044effca84ac17d467d3f0b2edfe82e709b Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 7 Nov 2025 22:18:56 +0100
Subject: [PATCH 12/32] Filters accounts by user permissions

Ensures that the account selector only displays accounts
that the user has permissions for.

This change modifies the `ExpensesAPI` to include a
`filterByUser` parameter when fetching accounts, which is
then passed to the backend to retrieve only authorized
accounts. A log statement was added to confirm proper
filtering.
---
 .../expenses/components/AccountSelector.vue   |  6 ++++-
 src/modules/expenses/services/ExpensesAPI.ts  | 25 ++++++++++++++-----
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/modules/expenses/components/AccountSelector.vue b/src/modules/expenses/components/AccountSelector.vue
index 18d6c3b..2d92207 100644
--- a/src/modules/expenses/components/AccountSelector.vue
+++ b/src/modules/expenses/components/AccountSelector.vue
@@ -212,10 +212,14 @@ async function loadAccounts() {
       throw new Error('No wallet available. Please log in.')
     }
 
+    // Filter by user permissions to only show authorized accounts
     accountHierarchy.value = await expensesAPI.getAccountHierarchy(
       wallet.inkey,
-      props.rootAccount
+      props.rootAccount,
+      true // filterByUser
     )
+
+    console.log('[AccountSelector] Loaded user-authorized accounts:', accountHierarchy.value)
   } catch (err) {
     error.value = err instanceof Error ? err.message : 'Failed to load accounts'
     console.error('[AccountSelector] Error loading accounts:', err)
diff --git a/src/modules/expenses/services/ExpensesAPI.ts b/src/modules/expenses/services/ExpensesAPI.ts
index 08fcd6e..973c5af 100644
--- a/src/modules/expenses/services/ExpensesAPI.ts
+++ b/src/modules/expenses/services/ExpensesAPI.ts
@@ -46,12 +46,17 @@ export class ExpensesAPI extends BaseService {
   /**
    * Get all accounts from castle
    *
-   * Note: Currently returns all accounts. Once castle API implements
-   * user permissions, use filter_by_user=true parameter.
+   * @param walletKey - Wallet key for authentication
+   * @param filterByUser - If true, only return accounts the user has permissions for
    */
-  async getAccounts(walletKey: string): Promise<Account[]> {
+  async getAccounts(walletKey: string, filterByUser: boolean = false): Promise<Account[]> {
     try {
-      const response = await fetch(`${this.baseUrl}/castle/api/v1/accounts`, {
+      const url = new URL(`${this.baseUrl}/castle/api/v1/accounts`)
+      if (filterByUser) {
+        url.searchParams.set('filter_by_user', 'true')
+      }
+
+      const response = await fetch(url.toString(), {
         method: 'GET',
         headers: this.getHeaders(walletKey),
         signal: AbortSignal.timeout(this.config?.apiConfig?.timeout || 30000)
@@ -74,9 +79,17 @@ export class ExpensesAPI extends BaseService {
    *
    * Converts flat account list to nested tree based on colon-separated names
    * e.g., "Expenses:Groceries:Organic" becomes nested structure
+   *
+   * @param walletKey - Wallet key for authentication
+   * @param rootAccount - Optional root account to filter by (e.g., "Expenses")
+   * @param filterByUser - If true, only return accounts the user has permissions for
    */
-  async getAccountHierarchy(walletKey: string, rootAccount?: string): Promise<AccountNode[]> {
-    const accounts = await this.getAccounts(walletKey)
+  async getAccountHierarchy(
+    walletKey: string,
+    rootAccount?: string,
+    filterByUser: boolean = false
+  ): Promise<AccountNode[]> {
+    const accounts = await this.getAccounts(walletKey, filterByUser)
 
     // Filter by root account if specified
     let filteredAccounts = accounts

From fff42d170ef03fe0c2961ce8ae738a2c5f12e92e Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sat, 8 Nov 2025 00:10:40 +0100
Subject: [PATCH 13/32] Adds equity eligibility check for expenses

Improves the expense tracking component by fetching user information to determine equity eligibility.

This allows displaying the "Convert to equity" checkbox only to eligible users, enhancing the user experience and ensuring accurate expense categorization.

Also includes error handling to prevent the form from breaking if user information cannot be loaded.
---
 .../expenses/components/AddExpense.vue        | 27 ++++++++++++----
 src/modules/expenses/services/ExpensesAPI.ts  | 31 ++++++++++++++++++-
 src/modules/expenses/types/index.ts           |  9 ++++++
 3 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/src/modules/expenses/components/AddExpense.vue b/src/modules/expenses/components/AddExpense.vue
index 75f9280..4772057 100644
--- a/src/modules/expenses/components/AddExpense.vue
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -138,8 +138,8 @@
             </FormItem>
           </FormField>
 
-          <!-- Convert to equity checkbox -->
-          <FormField v-slot="{ value, handleChange }" name="isEquity">
+          <!-- Convert to equity checkbox (only show if user is equity eligible) -->
+          <FormField v-if="userInfo?.is_equity_eligible" v-slot="{ value, handleChange }" name="isEquity">
             <FormItem>
               <div class="flex items-center space-x-2">
                 <FormControl>
@@ -239,7 +239,7 @@ import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import { useAuth } from '@/composables/useAuthService'
 import { useToast } from '@/core/composables/useToast'
 import type { ExpensesAPI } from '../services/ExpensesAPI'
-import type { Account } from '../types'
+import type { Account, UserInfo } from '../types'
 import AccountSelector from './AccountSelector.vue'
 
 interface Emits {
@@ -261,6 +261,7 @@ const selectedAccount = ref<Account | null>(null)
 const isSubmitting = ref(false)
 const availableCurrencies = ref<string[]>([])
 const loadingCurrencies = ref(true)
+const userInfo = ref<UserInfo | null>(null)
 
 // Form schema
 const formSchema = toTypedSchema(
@@ -289,12 +290,19 @@ const { resetForm, meta } = form
 const isFormValid = computed(() => meta.value.valid)
 
 /**
- * Fetch available currencies and default currency on component mount
+ * Fetch available currencies, default currency, and user info on component mount
  */
 onMounted(async () => {
   try {
     loadingCurrencies.value = true
 
+    // Get wallet key
+    const wallet = user.value?.wallets?.[0]
+    if (!wallet || !wallet.inkey) {
+      console.warn('[AddExpense] No wallet available for loading data')
+      return
+    }
+
     // Fetch available currencies
     const currencies = await expensesAPI.getCurrencies()
     availableCurrencies.value = currencies
@@ -307,9 +315,16 @@ onMounted(async () => {
     const initialCurrency = defaultCurrency || currencies[0] || 'EUR'
     form.setFieldValue('currency', initialCurrency)
     console.log('[AddExpense] Default currency set to:', initialCurrency)
+
+    // Fetch user info to check equity eligibility
+    userInfo.value = await expensesAPI.getUserInfo(wallet.inkey)
+    console.log('[AddExpense] User info loaded:', {
+      is_equity_eligible: userInfo.value.is_equity_eligible,
+      equity_account: userInfo.value.equity_account_name
+    })
   } catch (error) {
-    console.error('[AddExpense] Failed to load currencies:', error)
-    toast.error('Failed to load currencies', { description: 'Please check your connection and try again' })
+    console.error('[AddExpense] Failed to load data:', error)
+    toast.error('Failed to load form data', { description: 'Please check your connection and try again' })
     availableCurrencies.value = []
   } finally {
     loadingCurrencies.value = false
diff --git a/src/modules/expenses/services/ExpensesAPI.ts b/src/modules/expenses/services/ExpensesAPI.ts
index 973c5af..cece654 100644
--- a/src/modules/expenses/services/ExpensesAPI.ts
+++ b/src/modules/expenses/services/ExpensesAPI.ts
@@ -7,7 +7,8 @@ import type {
   Account,
   ExpenseEntryRequest,
   ExpenseEntry,
-  AccountNode
+  AccountNode,
+  UserInfo
 } from '../types'
 import { appConfig } from '@/app.config'
 
@@ -263,4 +264,32 @@ export class ExpensesAPI extends BaseService {
       throw error
     }
   }
+
+  /**
+   * Get user information including equity eligibility
+   *
+   * @param walletKey - Wallet key for authentication (invoice key)
+   */
+  async getUserInfo(walletKey: string): Promise<UserInfo> {
+    try {
+      const response = await fetch(`${this.baseUrl}/castle/api/v1/user/info`, {
+        method: 'GET',
+        headers: this.getHeaders(walletKey),
+        signal: AbortSignal.timeout(this.config?.apiConfig?.timeout || 30000)
+      })
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch user info: ${response.statusText}`)
+      }
+
+      return await response.json()
+    } catch (error) {
+      console.error('[ExpensesAPI] Error fetching user info:', error)
+      // Return default non-eligible user on error
+      return {
+        user_id: '',
+        is_equity_eligible: false
+      }
+    }
+  }
 }
diff --git a/src/modules/expenses/types/index.ts b/src/modules/expenses/types/index.ts
index 04a4c97..5ce4932 100644
--- a/src/modules/expenses/types/index.ts
+++ b/src/modules/expenses/types/index.ts
@@ -86,6 +86,15 @@ export interface AccountNode {
   children: AccountNode[]
 }
 
+/**
+ * User information including equity eligibility
+ */
+export interface UserInfo {
+  user_id: string
+  is_equity_eligible: boolean
+  equity_account_name?: string
+}
+
 /**
  * Module configuration
  */

From d7cd72f8507e11a8a216d0f89064a1ad94d4ac9b Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sat, 8 Nov 2025 00:22:13 +0100
Subject: [PATCH 14/32] Enhances account display in expense form

Improves the visual presentation of the selected account in the add expense form by using a badge.

This makes the selected account more prominent and provides a clearer distinction from other text elements.
---
 src/modules/expenses/components/AddExpense.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/modules/expenses/components/AddExpense.vue b/src/modules/expenses/components/AddExpense.vue
index 4772057..abb9079 100644
--- a/src/modules/expenses/components/AddExpense.vue
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -161,9 +161,10 @@
 
           <!-- Selected account info -->
           <div class="p-3 rounded-lg bg-muted/50">
-            <p class="text-sm font-medium text-foreground mb-1">
-              Account: {{ selectedAccount?.name }}
-            </p>
+            <div class="flex items-center gap-2 mb-1">
+              <span class="text-sm text-muted-foreground">Account:</span>
+              <Badge variant="secondary" class="font-mono">{{ selectedAccount?.name }}</Badge>
+            </div>
             <p
               v-if="selectedAccount?.description"
               class="text-xs text-muted-foreground"
@@ -212,6 +213,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Checkbox } from '@/components/ui/checkbox'
+import { Badge } from '@/components/ui/badge'
 import {
   FormControl,
   FormDescription,

From 90a5741d7ab2418bf3389bcb08e0d0a377de6594 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sat, 8 Nov 2025 11:48:18 +0100
Subject: [PATCH 15/32] Updates description placeholder for clarity

Updates the description placeholder in the AddExpense component to provide more specific and helpful examples for users.

This aims to guide users in providing more detailed and relevant descriptions of their expenses, improving the overall expense tracking experience.
---
 src/modules/expenses/components/AddExpense.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/expenses/components/AddExpense.vue b/src/modules/expenses/components/AddExpense.vue
index abb9079..04a3ccd 100644
--- a/src/modules/expenses/components/AddExpense.vue
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -62,7 +62,7 @@
               <FormLabel>Description *</FormLabel>
               <FormControl>
                 <Textarea
-                  placeholder="e.g., Groceries for community dinner"
+                  placeholder="e.g., Biocoop, Ferme des Croquantes, Foix Market, etc"
                   v-bind="componentField"
                   rows="3"
                 />

From f5075ed96dedd868d80dd32899b047bd25ab6a74 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Mon, 10 Nov 2025 15:50:33 +0100
Subject: [PATCH 16/32] Clarifies amount field in ExpenseEntryRequest

Updates the description of the `amount` and `currency` fields in the `ExpenseEntryRequest` interface to clarify that the amount is in the specified currency (or satoshis if currency is None).
---
 src/modules/expenses/types/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/expenses/types/index.ts b/src/modules/expenses/types/index.ts
index 5ce4932..1f9e37e 100644
--- a/src/modules/expenses/types/index.ts
+++ b/src/modules/expenses/types/index.ts
@@ -51,12 +51,12 @@ export enum PermissionType {
  */
 export interface ExpenseEntryRequest {
   description: string
-  amount: number // In sats
+  amount: number // Amount in the specified currency (or satoshis if currency is None)
   expense_account: string // Account name or ID
   is_equity: boolean
   user_wallet: string
   reference?: string
-  currency?: string // e.g., "USD"
+  currency?: string // If None, amount is in satoshis. Otherwise, fiat currency code (e.g., "EUR", "USD")
   entry_date?: string // ISO datetime string
 }
 

From 78fba2a63728eb208171075c41c342646b0a639a Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Tue, 11 Nov 2025 03:29:36 +0100
Subject: [PATCH 17/32] Add exclude_virtual parameter to match backend API
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds support for the new exclude_virtual parameter added to the Castle backend API.

Changes:
- Added excludeVirtual parameter to getAccounts() (defaults to true)
- Added excludeVirtual parameter to getAccountHierarchy() (defaults to true)
- Both methods now pass the parameter to the backend API

This ensures virtual parent accounts are excluded from user views by default,
while still allowing permission inheritance to work correctly on the backend.

The default value of true means existing code automatically benefits from
the change without modification - virtual accounts won't appear in user
account selectors.

🤖 Generated with Claude Code (https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/modules/expenses/services/ExpensesAPI.ts | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/modules/expenses/services/ExpensesAPI.ts b/src/modules/expenses/services/ExpensesAPI.ts
index cece654..8b720fa 100644
--- a/src/modules/expenses/services/ExpensesAPI.ts
+++ b/src/modules/expenses/services/ExpensesAPI.ts
@@ -49,13 +49,21 @@ export class ExpensesAPI extends BaseService {
    *
    * @param walletKey - Wallet key for authentication
    * @param filterByUser - If true, only return accounts the user has permissions for
+   * @param excludeVirtual - If true, exclude virtual parent accounts (default true for user views)
    */
-  async getAccounts(walletKey: string, filterByUser: boolean = false): Promise<Account[]> {
+  async getAccounts(
+    walletKey: string,
+    filterByUser: boolean = false,
+    excludeVirtual: boolean = true
+  ): Promise<Account[]> {
     try {
       const url = new URL(`${this.baseUrl}/castle/api/v1/accounts`)
       if (filterByUser) {
         url.searchParams.set('filter_by_user', 'true')
       }
+      if (excludeVirtual) {
+        url.searchParams.set('exclude_virtual', 'true')
+      }
 
       const response = await fetch(url.toString(), {
         method: 'GET',
@@ -84,13 +92,15 @@ export class ExpensesAPI extends BaseService {
    * @param walletKey - Wallet key for authentication
    * @param rootAccount - Optional root account to filter by (e.g., "Expenses")
    * @param filterByUser - If true, only return accounts the user has permissions for
+   * @param excludeVirtual - If true, exclude virtual parent accounts (default true for user views)
    */
   async getAccountHierarchy(
     walletKey: string,
     rootAccount?: string,
-    filterByUser: boolean = false
+    filterByUser: boolean = false,
+    excludeVirtual: boolean = true
   ): Promise<AccountNode[]> {
-    const accounts = await this.getAccounts(walletKey, filterByUser)
+    const accounts = await this.getAccounts(walletKey, filterByUser, excludeVirtual)
 
     // Filter by root account if specified
     let filteredAccounts = accounts

From be00c61c779c4a94fbfed37b4f3e78a6885284ec Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Thu, 13 Nov 2025 09:57:28 +0100
Subject: [PATCH 18/32] Add transactions page with fuzzy search and success
 dialog for expenses
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Features:
- Created TransactionsPage with mobile-optimized layout
  - Card-based transaction items with status indicators
  - Fuzzy search by description, payee, reference, username, and tags
  - Day filter options (5, 30, 60, 90 days)
  - Pagination support
  - Responsive design for mobile and desktop
- Added getUserTransactions API method to ExpensesAPI
  - Supports filtering by days, user ID, and account type
  - Returns paginated transaction data
- Updated AddExpense component with success confirmation
  - Shows success message in same dialog after submission
  - Provides option to navigate to transactions page
  - Clean single-dialog approach
- Added "My Transactions" link to navbar menu
- Added Transaction and TransactionListResponse types
- Added permission management types and API methods (grantPermission, listPermissions, revokePermission)
- Installed alert-dialog component for UI consistency

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 package-lock.json                             |  22 +-
 package.json                                  |   2 +-
 .../ui/alert-dialog/AlertDialog.vue           |  15 +
 .../ui/alert-dialog/AlertDialogAction.vue     |  18 +
 .../ui/alert-dialog/AlertDialogCancel.vue     |  25 ++
 .../ui/alert-dialog/AlertDialogContent.vue    |  39 ++
 .../alert-dialog/AlertDialogDescription.vue   |  23 ++
 .../ui/alert-dialog/AlertDialogFooter.vue     |  21 +
 .../ui/alert-dialog/AlertDialogHeader.vue     |  16 +
 .../ui/alert-dialog/AlertDialogTitle.vue      |  20 +
 .../ui/alert-dialog/AlertDialogTrigger.vue    |  12 +
 src/components/ui/alert-dialog/index.ts       |   9 +
 src/components/ui/button/Button.vue           |  19 +-
 src/components/ui/button/index.ts             |  36 +-
 src/composables/useModularNavigation.ts       |  36 +-
 .../expenses/components/AddExpense.vue        | 101 ++++-
 src/modules/expenses/index.ts                 |  13 +
 src/modules/expenses/services/ExpensesAPI.ts  | 137 ++++++-
 src/modules/expenses/types/index.ts           |  58 +++
 .../expenses/views/TransactionsPage.vue       | 366 ++++++++++++++++++
 20 files changed, 914 insertions(+), 74 deletions(-)
 create mode 100644 src/components/ui/alert-dialog/AlertDialog.vue
 create mode 100644 src/components/ui/alert-dialog/AlertDialogAction.vue
 create mode 100644 src/components/ui/alert-dialog/AlertDialogCancel.vue
 create mode 100644 src/components/ui/alert-dialog/AlertDialogContent.vue
 create mode 100644 src/components/ui/alert-dialog/AlertDialogDescription.vue
 create mode 100644 src/components/ui/alert-dialog/AlertDialogFooter.vue
 create mode 100644 src/components/ui/alert-dialog/AlertDialogHeader.vue
 create mode 100644 src/components/ui/alert-dialog/AlertDialogTitle.vue
 create mode 100644 src/components/ui/alert-dialog/AlertDialogTrigger.vue
 create mode 100644 src/components/ui/alert-dialog/index.ts
 create mode 100644 src/modules/expenses/views/TransactionsPage.vue

diff --git a/package-lock.json b/package-lock.json
index 1915af6..68f5fc2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "qr-scanner": "^1.4.2",
         "qrcode": "^1.5.4",
         "radix-vue": "^1.9.13",
-        "reka-ui": "^2.5.0",
+        "reka-ui": "^2.6.0",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7",
         "unique-names-generator": "^4.7.1",
@@ -8890,20 +8890,6 @@
         "ms": "^2.0.0"
       }
     },
-    "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/idb": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
@@ -12167,9 +12153,9 @@
       }
     },
     "node_modules/reka-ui": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.5.0.tgz",
-      "integrity": "sha512-81aMAmJeVCy2k0E6x7n1kypDY6aM1ldLis5+zcdV1/JtoAlSDck5OBsyLRJU9CfgbrQp1ImnRnBSmC4fZ2fkZQ==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.6.0.tgz",
+      "integrity": "sha512-NrGMKrABD97l890mFS3TNUzB0BLUfbL3hh0NjcJRIUSUljb288bx3Mzo31nOyUcdiiW0HqFGXJwyCBh9cWgb0w==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/dom": "^1.6.13",
diff --git a/package.json b/package.json
index 304528e..56c29f6 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.4",
     "radix-vue": "^1.9.13",
-    "reka-ui": "^2.5.0",
+    "reka-ui": "^2.6.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "unique-names-generator": "^4.7.1",
diff --git a/src/components/ui/alert-dialog/AlertDialog.vue b/src/components/ui/alert-dialog/AlertDialog.vue
new file mode 100644
index 0000000..ff9accb
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AlertDialogEmits, AlertDialogProps } from "reka-ui"
+import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot />
+  </AlertDialogRoot>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogAction.vue b/src/components/ui/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 0000000..09cf6fc
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { AlertDialogActionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogAction } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogCancel.vue b/src/components/ui/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 0000000..e261894
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { AlertDialogCancelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogCancel } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogContent.vue b/src/components/ui/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 0000000..73e4fcb
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogContent,
+
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <AlertDialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogDescription.vue b/src/components/ui/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 0000000..b6d165e
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AlertDialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogDescription,
+
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogDescription
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogFooter.vue b/src/components/ui/alert-dialog/AlertDialogFooter.vue
new file mode 100644
index 0000000..c764e73
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogHeader.vue b/src/components/ui/alert-dialog/AlertDialogHeader.vue
new file mode 100644
index 0000000..b5e5540
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogTitle.vue b/src/components/ui/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 0000000..b829392
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { AlertDialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogTitle } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogTitle
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogTrigger.vue b/src/components/ui/alert-dialog/AlertDialogTrigger.vue
new file mode 100644
index 0000000..f104dcc
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AlertDialogTriggerProps } from "reka-ui"
+import { AlertDialogTrigger } from "reka-ui"
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>
diff --git a/src/components/ui/alert-dialog/index.ts b/src/components/ui/alert-dialog/index.ts
new file mode 100644
index 0000000..cf1b45d
--- /dev/null
+++ b/src/components/ui/alert-dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as AlertDialog } from "./AlertDialog.vue"
+export { default as AlertDialogAction } from "./AlertDialogAction.vue"
+export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"
+export { default as AlertDialogContent } from "./AlertDialogContent.vue"
+export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
+export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
+export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
+export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
+export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue"
diff --git a/src/components/ui/button/Button.vue b/src/components/ui/button/Button.vue
index 17dc84d..374320b 100644
--- a/src/components/ui/button/Button.vue
+++ b/src/components/ui/button/Button.vue
@@ -1,22 +1,25 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'reka-ui'
-import { type ButtonVariants, buttonVariants } from '.'
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "."
 
 interface Props extends PrimitiveProps {
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-  class?: HTMLAttributes['class']
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  as: 'button',
+  as: "button",
 })
 </script>
 
 <template>
   <Primitive
+    data-slot="button"
     :as="as"
     :as-child="asChild"
     :class="cn(buttonVariants({ variant, size }), props.class)"
diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts
index 47587a3..c90f809 100644
--- a/src/components/ui/button/index.ts
+++ b/src/components/ui/button/index.ts
@@ -1,33 +1,37 @@
-import { cva, type VariantProps } from 'class-variance-authority'
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
 
-export { default as Button } from './Button.vue'
+export { default as Button } from "./Button.vue"
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive:
-          'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
-          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: 'h-9 px-4 py-2',
-        xs: 'h-7 rounded px-2',
-        sm: 'h-8 rounded-md px-3 text-xs',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
+        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
+        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
+        "icon": "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
   },
 )
diff --git a/src/composables/useModularNavigation.ts b/src/composables/useModularNavigation.ts
index af47f66..5ff695f 100644
--- a/src/composables/useModularNavigation.ts
+++ b/src/composables/useModularNavigation.ts
@@ -61,30 +61,40 @@ export function useModularNavigation() {
 
     // Events module items
     if (appConfig.modules.events.enabled) {
-      items.push({ 
-        name: 'My Tickets', 
-        href: '/my-tickets', 
+      items.push({
+        name: 'My Tickets',
+        href: '/my-tickets',
         icon: 'Ticket',
-        requiresAuth: true 
+        requiresAuth: true
       })
     }
 
-    // Market module items  
+    // Market module items
     if (appConfig.modules.market.enabled) {
-      items.push({ 
-        name: 'Market Dashboard', 
-        href: '/market-dashboard', 
+      items.push({
+        name: 'Market Dashboard',
+        href: '/market-dashboard',
         icon: 'Store',
-        requiresAuth: true 
+        requiresAuth: true
+      })
+    }
+
+    // Expenses module items
+    if (appConfig.modules.expenses.enabled) {
+      items.push({
+        name: 'My Transactions',
+        href: '/expenses/transactions',
+        icon: 'Receipt',
+        requiresAuth: true
       })
     }
 
     // Base module items (always available)
-    items.push({ 
-      name: 'Relay Hub Status', 
-      href: '/relay-hub-status', 
+    items.push({
+      name: 'Relay Hub Status',
+      href: '/relay-hub-status',
       icon: 'Activity',
-      requiresAuth: true 
+      requiresAuth: true
     })
 
     return items
diff --git a/src/modules/expenses/components/AddExpense.vue b/src/modules/expenses/components/AddExpense.vue
index 04a3ccd..8a83ef2 100644
--- a/src/modules/expenses/components/AddExpense.vue
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -1,16 +1,48 @@
 <template>
-  <Dialog :open="true" @update:open="(open) => !open && $emit('close')">
+  <Dialog :open="true" @update:open="(open) => !open && handleDialogClose()">
     <DialogContent class="max-w-2xl max-h-[85vh] my-4 overflow-hidden flex flex-col p-0 gap-0">
-      <!-- Header -->
-      <DialogHeader class="px-6 pt-6 pb-4 border-b shrink-0">
-        <DialogTitle class="flex items-center gap-2">
-          <DollarSign class="h-5 w-5 text-primary" />
-          <span>Add Expense</span>
-        </DialogTitle>
-        <DialogDescription>
-          Submit an expense for admin approval
-        </DialogDescription>
-      </DialogHeader>
+      <!-- Success State -->
+      <div v-if="showSuccessDialog" class="flex flex-col items-center justify-center p-8 space-y-6">
+        <!-- Success Icon -->
+        <div class="rounded-full bg-green-100 dark:bg-green-900/20 p-4">
+          <CheckCircle2 class="h-12 w-12 text-green-600 dark:text-green-400" />
+        </div>
+
+        <!-- Success Message -->
+        <div class="text-center space-y-2">
+          <h2 class="text-2xl font-bold">Expense Submitted Successfully!</h2>
+          <p class="text-muted-foreground">
+            Your expense has been submitted and is pending admin approval.
+          </p>
+          <p class="text-sm text-muted-foreground">
+            You can track the status in your transactions page.
+          </p>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="flex flex-col sm:flex-row gap-3 w-full max-w-sm">
+          <Button variant="outline" @click="closeSuccessDialog" class="flex-1">
+            Close
+          </Button>
+          <Button @click="goToTransactions" class="flex-1">
+            <Receipt class="h-4 w-4 mr-2" />
+            View My Transactions
+          </Button>
+        </div>
+      </div>
+
+      <!-- Form State -->
+      <template v-else>
+        <!-- Header -->
+        <DialogHeader class="px-6 pt-6 pb-4 border-b shrink-0">
+          <DialogTitle class="flex items-center gap-2">
+            <DollarSign class="h-5 w-5 text-primary" />
+            <span>Add Expense</span>
+          </DialogTitle>
+          <DialogDescription>
+            Submit an expense for admin approval
+          </DialogDescription>
+        </DialogHeader>
 
       <!-- Scrollable Form Content -->
       <div class="flex-1 overflow-y-auto px-6 py-4 space-y-4 min-h-0">
@@ -200,12 +232,14 @@
         </form>
       </div>
       </div>
+      </template>
     </DialogContent>
   </Dialog>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
@@ -236,7 +270,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
-import { DollarSign, ChevronLeft, Loader2 } from 'lucide-vue-next'
+import { DollarSign, ChevronLeft, Loader2, CheckCircle2, Receipt } from 'lucide-vue-next'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import { useAuth } from '@/composables/useAuthService'
 import { useToast } from '@/core/composables/useToast'
@@ -256,6 +290,7 @@ const emit = defineEmits<Emits>()
 const expensesAPI = injectService<ExpensesAPI>(SERVICE_TOKENS.EXPENSES_API)
 const { user } = useAuth()
 const toast = useToast()
+const router = useRouter()
 
 // Component state
 const currentStep = ref(1)
@@ -264,6 +299,7 @@ const isSubmitting = ref(false)
 const availableCurrencies = ref<string[]>([])
 const loadingCurrencies = ref(true)
 const userInfo = ref<UserInfo | null>(null)
+const showSuccessDialog = ref(false)
 
 // Form schema
 const formSchema = toTypedSchema(
@@ -371,17 +407,16 @@ const onSubmit = form.handleSubmit(async (values) => {
       currency: values.currency
     })
 
-    // Show success message
-    toast.success('Expense submitted', { description: 'Your expense is pending admin approval' })
+    // Show success dialog instead of toast
+    showSuccessDialog.value = true
 
-    // Reset form and close
+    // Reset form for next submission
     resetForm()
     selectedAccount.value = null
     currentStep.value = 1
 
     emit('expense-submitted')
-    emit('action-complete')
-    emit('close')
+    // DON'T emit 'action-complete' yet - wait for user to close success dialog
   } catch (error) {
     console.error('[AddExpense] Error submitting expense:', error)
     const errorMessage = error instanceof Error ? error.message : 'Unknown error'
@@ -390,4 +425,36 @@ const onSubmit = form.handleSubmit(async (values) => {
     isSubmitting.value = false
   }
 })
+
+/**
+ * Handle viewing transactions
+ */
+function goToTransactions() {
+  showSuccessDialog.value = false
+  emit('action-complete')
+  emit('close')
+  router.push('/expenses/transactions')
+}
+
+/**
+ * Handle closing success dialog
+ */
+function closeSuccessDialog() {
+  showSuccessDialog.value = false
+  emit('action-complete')
+  emit('close')
+}
+
+/**
+ * Handle dialog close (from X button or clicking outside)
+ */
+function handleDialogClose() {
+  if (showSuccessDialog.value) {
+    // If in success state, close the whole thing
+    closeSuccessDialog()
+  } else {
+    // If in form state, just close normally
+    emit('close')
+  }
+}
 </script>
diff --git a/src/modules/expenses/index.ts b/src/modules/expenses/index.ts
index 8e21d18..1ee1f3c 100644
--- a/src/modules/expenses/index.ts
+++ b/src/modules/expenses/index.ts
@@ -11,12 +11,25 @@ import type { ModulePlugin } from '@/core/types'
 import { container, SERVICE_TOKENS } from '@/core/di-container'
 import { ExpensesAPI } from './services/ExpensesAPI'
 import AddExpense from './components/AddExpense.vue'
+import TransactionsPage from './views/TransactionsPage.vue'
 
 export const expensesModule: ModulePlugin = {
   name: 'expenses',
   version: '1.0.0',
   dependencies: ['base'],
 
+  routes: [
+    {
+      path: '/expenses/transactions',
+      name: 'ExpenseTransactions',
+      component: TransactionsPage,
+      meta: {
+        requiresAuth: true,
+        title: 'My Transactions'
+      }
+    }
+  ],
+
   quickActions: [
     {
       id: 'add-expense',
diff --git a/src/modules/expenses/services/ExpensesAPI.ts b/src/modules/expenses/services/ExpensesAPI.ts
index 8b720fa..a8ba7c2 100644
--- a/src/modules/expenses/services/ExpensesAPI.ts
+++ b/src/modules/expenses/services/ExpensesAPI.ts
@@ -8,7 +8,10 @@ import type {
   ExpenseEntryRequest,
   ExpenseEntry,
   AccountNode,
-  UserInfo
+  UserInfo,
+  AccountPermission,
+  GrantPermissionRequest,
+  TransactionListResponse
 } from '../types'
 import { appConfig } from '@/app.config'
 
@@ -302,4 +305,136 @@ export class ExpensesAPI extends BaseService {
       }
     }
   }
+
+  /**
+   * List all account permissions (admin only)
+   *
+   * @param adminKey - Admin key for authentication
+   */
+  async listPermissions(adminKey: string): Promise<AccountPermission[]> {
+    try {
+      const response = await fetch(`${this.baseUrl}/castle/api/v1/permissions`, {
+        method: 'GET',
+        headers: this.getHeaders(adminKey),
+        signal: AbortSignal.timeout(this.config?.apiConfig?.timeout || 30000)
+      })
+
+      if (!response.ok) {
+        throw new Error(`Failed to list permissions: ${response.statusText}`)
+      }
+
+      const permissions = await response.json()
+      return permissions as AccountPermission[]
+    } catch (error) {
+      console.error('[ExpensesAPI] Error listing permissions:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Grant account permission to a user (admin only)
+   *
+   * @param adminKey - Admin key for authentication
+   * @param request - Permission grant request
+   */
+  async grantPermission(
+    adminKey: string,
+    request: GrantPermissionRequest
+  ): Promise<AccountPermission> {
+    try {
+      const response = await fetch(`${this.baseUrl}/castle/api/v1/permissions`, {
+        method: 'POST',
+        headers: this.getHeaders(adminKey),
+        body: JSON.stringify(request),
+        signal: AbortSignal.timeout(this.config?.apiConfig?.timeout || 30000)
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}))
+        const errorMessage =
+          errorData.detail || `Failed to grant permission: ${response.statusText}`
+        throw new Error(errorMessage)
+      }
+
+      const permission = await response.json()
+      return permission as AccountPermission
+    } catch (error) {
+      console.error('[ExpensesAPI] Error granting permission:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Revoke account permission (admin only)
+   *
+   * @param adminKey - Admin key for authentication
+   * @param permissionId - ID of the permission to revoke
+   */
+  async revokePermission(adminKey: string, permissionId: string): Promise<void> {
+    try {
+      const response = await fetch(
+        `${this.baseUrl}/castle/api/v1/permissions/${permissionId}`,
+        {
+          method: 'DELETE',
+          headers: this.getHeaders(adminKey),
+          signal: AbortSignal.timeout(this.config?.apiConfig?.timeout || 30000)
+        }
+      )
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}))
+        const errorMessage =
+          errorData.detail || `Failed to revoke permission: ${response.statusText}`
+        throw new Error(errorMessage)
+      }
+    } catch (error) {
+      console.error('[ExpensesAPI] Error revoking permission:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Get user's transactions from journal
+   *
+   * @param walletKey - Wallet key for authentication (invoice key)
+   * @param options - Query options for filtering and pagination
+   */
+  async getUserTransactions(
+    walletKey: string,
+    options?: {
+      limit?: number
+      offset?: number
+      days?: number // 5, 30, 60, or 90
+      filter_user_id?: string
+      filter_account_type?: string
+    }
+  ): Promise<TransactionListResponse> {
+    try {
+      const url = new URL(`${this.baseUrl}/castle/api/v1/entries/user`)
+
+      // Add query parameters
+      if (options?.limit) url.searchParams.set('limit', String(options.limit))
+      if (options?.offset) url.searchParams.set('offset', String(options.offset))
+      if (options?.days) url.searchParams.set('days', String(options.days))
+      if (options?.filter_user_id)
+        url.searchParams.set('filter_user_id', options.filter_user_id)
+      if (options?.filter_account_type)
+        url.searchParams.set('filter_account_type', options.filter_account_type)
+
+      const response = await fetch(url.toString(), {
+        method: 'GET',
+        headers: this.getHeaders(walletKey),
+        signal: AbortSignal.timeout(this.config?.apiConfig?.timeout || 30000)
+      })
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch transactions: ${response.statusText}`)
+      }
+
+      return await response.json()
+    } catch (error) {
+      console.error('[ExpensesAPI] Error fetching transactions:', error)
+      throw error
+    }
+  }
 }
diff --git a/src/modules/expenses/types/index.ts b/src/modules/expenses/types/index.ts
index 1f9e37e..c830a9e 100644
--- a/src/modules/expenses/types/index.ts
+++ b/src/modules/expenses/types/index.ts
@@ -95,6 +95,64 @@ export interface UserInfo {
   equity_account_name?: string
 }
 
+/**
+ * Account permission for user access control
+ */
+export interface AccountPermission {
+  id: string
+  user_id: string
+  account_id: string
+  permission_type: PermissionType
+  granted_at: string
+  granted_by: string
+  expires_at?: string
+  notes?: string
+}
+
+/**
+ * Grant permission request payload
+ */
+export interface GrantPermissionRequest {
+  user_id: string
+  account_id: string
+  permission_type: PermissionType
+  expires_at?: string
+  notes?: string
+}
+
+/**
+ * Transaction entry from journal (user view)
+ */
+export interface Transaction {
+  id: string
+  date: string
+  entry_date: string
+  flag?: string // *, !, #, x for cleared, pending, flagged, voided
+  description: string
+  payee?: string
+  tags: string[]
+  links: string[]
+  amount: number // Amount in satoshis
+  user_id?: string
+  username?: string
+  reference?: string
+  meta?: Record<string, any>
+  fiat_amount?: number
+  fiat_currency?: string
+}
+
+/**
+ * Transaction list response with pagination
+ */
+export interface TransactionListResponse {
+  entries: Transaction[]
+  total: number
+  limit: number
+  offset: number
+  has_next: boolean
+  has_prev: boolean
+}
+
 /**
  * Module configuration
  */
diff --git a/src/modules/expenses/views/TransactionsPage.vue b/src/modules/expenses/views/TransactionsPage.vue
new file mode 100644
index 0000000..0bcac73
--- /dev/null
+++ b/src/modules/expenses/views/TransactionsPage.vue
@@ -0,0 +1,366 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useAuth } from '@/composables/useAuthService'
+import { useToast } from '@/core/composables/useToast'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import type { ExpensesAPI } from '../services/ExpensesAPI'
+import type { Transaction } from '../types'
+import type { FuzzySearchOptions } from '@/composables/useFuzzySearch'
+import FuzzySearch from '@/components/ui/fuzzy-search/FuzzySearch.vue'
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+import {
+  CheckCircle2,
+  Clock,
+  Flag,
+  XCircle,
+  RefreshCw,
+  ChevronLeft,
+  ChevronRight,
+  Calendar
+} from 'lucide-vue-next'
+
+const { user } = useAuth()
+const toast = useToast()
+const expensesAPI = injectService<ExpensesAPI>(SERVICE_TOKENS.EXPENSES_API)
+
+const transactions = ref<Transaction[]>([])
+const isLoading = ref(false)
+const selectedDays = ref(5)
+const pagination = ref({
+  total: 0,
+  limit: 20,
+  offset: 0,
+  has_next: false,
+  has_prev: false
+})
+
+const walletKey = computed(() => user.value?.wallets?.[0]?.inkey)
+
+// Fuzzy search state and configuration
+const searchResults = ref<Transaction[]>([])
+
+const searchOptions: FuzzySearchOptions<Transaction> = {
+  fuseOptions: {
+    keys: [
+      { name: 'description', weight: 0.7 },  // Description has highest weight
+      { name: 'payee', weight: 0.5 },        // Payee is important
+      { name: 'reference', weight: 0.4 },    // Reference helps identification
+      { name: 'username', weight: 0.3 },     // Username for filtering
+      { name: 'tags', weight: 0.2 }          // Tags for categorization
+    ],
+    threshold: 0.4,        // Tolerant of typos
+    ignoreLocation: true,  // Match anywhere in the string
+    findAllMatches: true,  // Find all matches
+    minMatchCharLength: 2, // Minimum match length
+    shouldSort: true       // Sort by relevance
+  },
+  resultLimit: 100,        // Show up to 100 results
+  minSearchLength: 2,      // Start searching after 2 characters
+  matchAllWhenSearchEmpty: true
+}
+
+// Transactions to display (search results or all transactions)
+const transactionsToDisplay = computed(() => {
+  return searchResults.value.length > 0 ? searchResults.value : transactions.value
+})
+
+// Handle search results
+function handleSearchResults(results: Transaction[]) {
+  searchResults.value = results
+}
+
+// Day filter options
+const dayOptions = [
+  { label: '5 days', value: 5 },
+  { label: '30 days', value: 30 },
+  { label: '60 days', value: 60 },
+  { label: '90 days', value: 90 }
+]
+
+// Format date for display
+function formatDate(dateString: string): string {
+  if (!dateString) return '-'
+  const date = new Date(dateString)
+  return new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  }).format(date)
+}
+
+// Format amount with proper display
+function formatAmount(amount: number): string {
+  return new Intl.NumberFormat('en-US').format(amount)
+}
+
+// Get status icon and color based on flag
+function getStatusInfo(flag?: string) {
+  switch (flag) {
+    case '*':
+      return { icon: CheckCircle2, color: 'text-green-600', label: 'Cleared' }
+    case '!':
+      return { icon: Clock, color: 'text-orange-600', label: 'Pending' }
+    case '#':
+      return { icon: Flag, color: 'text-red-600', label: 'Flagged' }
+    case 'x':
+      return { icon: XCircle, color: 'text-muted-foreground', label: 'Voided' }
+    default:
+      return null
+  }
+}
+
+// Load transactions
+async function loadTransactions() {
+  if (!walletKey.value) {
+    toast.error('Authentication required', {
+      description: 'Please log in to view your transactions'
+    })
+    return
+  }
+
+  isLoading.value = true
+  try {
+    const response = await expensesAPI.getUserTransactions(walletKey.value, {
+      limit: pagination.value.limit,
+      offset: pagination.value.offset,
+      days: selectedDays.value
+    })
+
+    transactions.value = response.entries
+    pagination.value = {
+      total: response.total,
+      limit: response.limit,
+      offset: response.offset,
+      has_next: response.has_next,
+      has_prev: response.has_prev
+    }
+  } catch (error) {
+    console.error('Failed to load transactions:', error)
+    toast.error('Failed to load transactions', {
+      description: error instanceof Error ? error.message : 'Unknown error'
+    })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Change day filter
+function changeDayFilter(days: number) {
+  selectedDays.value = days
+  pagination.value.offset = 0 // Reset to first page
+  loadTransactions()
+}
+
+// Next page
+function nextPage() {
+  if (pagination.value.has_next) {
+    pagination.value.offset += pagination.value.limit
+    loadTransactions()
+  }
+}
+
+// Previous page
+function prevPage() {
+  if (pagination.value.has_prev) {
+    pagination.value.offset = Math.max(0, pagination.value.offset - pagination.value.limit)
+    loadTransactions()
+  }
+}
+
+onMounted(() => {
+  loadTransactions()
+})
+</script>
+
+<template>
+  <div class="container mx-auto p-4 max-w-4xl">
+    <!-- Header -->
+    <div class="mb-6">
+      <h1 class="text-2xl sm:text-3xl font-bold mb-2">My Transactions</h1>
+      <p class="text-muted-foreground">View your recent transaction history</p>
+    </div>
+
+    <!-- Search Bar -->
+    <div class="mb-4">
+      <FuzzySearch
+        :data="transactions"
+        :options="searchOptions"
+        placeholder="Search transactions by description, payee, reference..."
+        @results="handleSearchResults"
+      />
+    </div>
+
+    <!-- Controls -->
+    <Card class="mb-4">
+      <CardContent class="pt-6">
+        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+          <!-- Day Filter -->
+          <div class="space-y-2">
+            <div class="text-sm text-muted-foreground flex items-center gap-2">
+              <Calendar class="h-4 w-4" />
+              <span>Show transactions from:</span>
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <Button
+                v-for="option in dayOptions"
+                :key="option.value"
+                :variant="selectedDays === option.value ? 'default' : 'outline'"
+                size="sm"
+                @click="changeDayFilter(option.value)"
+                :disabled="isLoading"
+              >
+                {{ option.label }}
+              </Button>
+            </div>
+          </div>
+
+          <!-- Refresh Button -->
+          <Button variant="outline" size="sm" @click="loadTransactions" :disabled="isLoading">
+            <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': isLoading }" />
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+
+    <!-- Transactions List -->
+    <Card>
+      <CardHeader>
+        <CardTitle>Recent Transactions</CardTitle>
+        <CardDescription>
+          <span v-if="searchResults.length > 0">
+            Found {{ transactionsToDisplay.length }} matching transaction{{ transactionsToDisplay.length === 1 ? '' : 's' }}
+          </span>
+          <span v-else>
+            Showing {{ pagination.offset + 1 }} -
+            {{ Math.min(pagination.offset + pagination.limit, pagination.total) }} of
+            {{ pagination.total }} transactions
+          </span>
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <!-- Loading State -->
+        <div v-if="isLoading" class="text-center py-12">
+          <RefreshCw class="h-8 w-8 animate-spin mx-auto mb-4 text-muted-foreground" />
+          <p class="text-muted-foreground">Loading transactions...</p>
+        </div>
+
+        <!-- Empty State -->
+        <div v-else-if="transactionsToDisplay.length === 0" class="text-center py-12">
+          <p class="text-muted-foreground">No transactions found</p>
+          <p class="text-sm text-muted-foreground mt-2">
+            {{ searchResults.length > 0 ? 'Try a different search term' : 'Try selecting a different time period' }}
+          </p>
+        </div>
+
+        <!-- Transaction Items (Mobile-Optimized) -->
+        <div v-else class="space-y-3">
+          <div
+            v-for="(transaction, index) in transactionsToDisplay"
+            :key="transaction.id"
+            class="border rounded-lg p-4 hover:bg-muted/50 transition-colors"
+          >
+            <!-- Transaction Header -->
+            <div class="flex items-start justify-between gap-3 mb-2">
+              <div class="flex-1 min-w-0">
+                <div class="flex items-center gap-2 mb-1">
+                  <!-- Status Icon -->
+                  <component
+                    v-if="getStatusInfo(transaction.flag)"
+                    :is="getStatusInfo(transaction.flag)!.icon"
+                    :class="[
+                      'h-4 w-4 flex-shrink-0',
+                      getStatusInfo(transaction.flag)!.color
+                    ]"
+                  />
+                  <h3 class="font-medium text-sm sm:text-base truncate">
+                    {{ transaction.description }}
+                  </h3>
+                </div>
+                <p class="text-xs sm:text-sm text-muted-foreground">
+                  {{ formatDate(transaction.date) }}
+                </p>
+              </div>
+
+              <!-- Amount -->
+              <div class="text-right flex-shrink-0">
+                <p class="font-semibold text-sm sm:text-base">
+                  {{ formatAmount(transaction.amount) }} sats
+                </p>
+                <p v-if="transaction.fiat_amount" class="text-xs text-muted-foreground">
+                  {{ transaction.fiat_amount.toFixed(2) }} {{ transaction.fiat_currency }}
+                </p>
+              </div>
+            </div>
+
+            <!-- Transaction Details (Collapsible on mobile) -->
+            <div class="space-y-1 text-xs sm:text-sm">
+              <!-- Payee -->
+              <div v-if="transaction.payee" class="text-muted-foreground">
+                <span class="font-medium">Payee:</span> {{ transaction.payee }}
+              </div>
+
+              <!-- Reference -->
+              <div v-if="transaction.reference" class="text-muted-foreground">
+                <span class="font-medium">Ref:</span> {{ transaction.reference }}
+              </div>
+
+              <!-- Username (if available) -->
+              <div v-if="transaction.username" class="text-muted-foreground">
+                <span class="font-medium">User:</span> {{ transaction.username }}
+              </div>
+
+              <!-- Tags -->
+              <div v-if="transaction.tags && transaction.tags.length > 0" class="flex flex-wrap gap-1 mt-2">
+                <Badge v-for="tag in transaction.tags" :key="tag" variant="secondary" class="text-xs">
+                  {{ tag }}
+                </Badge>
+              </div>
+
+              <!-- Metadata Source -->
+              <div v-if="transaction.meta?.source" class="text-muted-foreground mt-1">
+                <span class="text-xs">Source: {{ transaction.meta.source }}</span>
+              </div>
+            </div>
+
+            <!-- Separator between items (except last) -->
+            <Separator v-if="index < transactionsToDisplay.length - 1" class="mt-3" />
+          </div>
+        </div>
+
+        <!-- Pagination (hide when searching) -->
+        <div
+          v-if="!isLoading && transactions.length > 0 && searchResults.length === 0 && (pagination.has_next || pagination.has_prev)"
+          class="flex items-center justify-between mt-6 pt-4 border-t"
+        >
+          <Button
+            variant="outline"
+            size="sm"
+            @click="prevPage"
+            :disabled="!pagination.has_prev || isLoading"
+          >
+            <ChevronLeft class="h-4 w-4 mr-1" />
+            <span class="hidden sm:inline">Previous</span>
+          </Button>
+
+          <span class="text-sm text-muted-foreground">
+            Page {{ Math.floor(pagination.offset / pagination.limit) + 1 }}
+          </span>
+
+          <Button
+            variant="outline"
+            size="sm"
+            @click="nextPage"
+            :disabled="!pagination.has_next || isLoading"
+          >
+            <span class="hidden sm:inline">Next</span>
+            <ChevronRight class="h-4 w-4 ml-1" />
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  </div>
+</template>

From 9c4b14f382348762902f3248410a5e14102c355f Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Thu, 13 Nov 2025 16:57:06 +0100
Subject: [PATCH 19/32] Emphasize pending approval status in expense success
 dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added prominent orange "Pending Admin Approval" badge with clock icon
- Updated messaging to clarify admin review process
- Improved visual hierarchy in success confirmation
- Enhanced user awareness of approval workflow

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/modules/expenses/components/AddExpense.vue | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/modules/expenses/components/AddExpense.vue b/src/modules/expenses/components/AddExpense.vue
index 8a83ef2..99f3462 100644
--- a/src/modules/expenses/components/AddExpense.vue
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -9,13 +9,22 @@
         </div>
 
         <!-- Success Message -->
-        <div class="text-center space-y-2">
+        <div class="text-center space-y-3">
           <h2 class="text-2xl font-bold">Expense Submitted Successfully!</h2>
+
+          <!-- Pending Approval Badge -->
+          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-orange-100 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800">
+            <Clock class="h-4 w-4 text-orange-600 dark:text-orange-400" />
+            <span class="text-sm font-medium text-orange-700 dark:text-orange-300">
+              Pending Admin Approval
+            </span>
+          </div>
+
           <p class="text-muted-foreground">
-            Your expense has been submitted and is pending admin approval.
+            Your expense has been submitted successfully. An administrator will review and approve it shortly.
           </p>
           <p class="text-sm text-muted-foreground">
-            You can track the status in your transactions page.
+            You can track the approval status in your transactions page.
           </p>
         </div>
 
@@ -270,7 +279,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
-import { DollarSign, ChevronLeft, Loader2, CheckCircle2, Receipt } from 'lucide-vue-next'
+import { DollarSign, ChevronLeft, Loader2, CheckCircle2, Receipt, Clock } from 'lucide-vue-next'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import { useAuth } from '@/composables/useAuthService'
 import { useToast } from '@/core/composables/useToast'

From 557d7ecacc7e387ed988c2b7ef854dc3c224d882 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 14 Nov 2025 16:39:32 +0100
Subject: [PATCH 20/32] Optimize TransactionsPage for mobile view

Dramatically reduced wasted space and improved mobile UX by:

- **Compact header**: Moved refresh button inline with title, similar to NostrFeed
- **Compact controls**: All day filter buttons now on one row with Calendar icon
- **Removed nested cards**: Eliminated Card wrapper around transactions list
- **Full-width layout**: Transactions now use full screen width on mobile (border-b) and rounded cards on desktop (md:border md:rounded-lg)
- **Consistent padding**: Uses px-0 on mobile, px-4 on desktop, matching NostrFeed patterns
- **Reduced vertical space**: Compacted header section to about half the original height
- **Cleaner imports**: Removed unused Card, CardContent, CardHeader, CardTitle, CardDescription, and Separator components

Layout now follows NostrFeed's mobile-optimized patterns with max-w-3xl container and responsive spacing.

Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../expenses/views/TransactionsPage.vue       | 287 +++++++++---------
 1 file changed, 142 insertions(+), 145 deletions(-)

diff --git a/src/modules/expenses/views/TransactionsPage.vue b/src/modules/expenses/views/TransactionsPage.vue
index 0bcac73..9dcd525 100644
--- a/src/modules/expenses/views/TransactionsPage.vue
+++ b/src/modules/expenses/views/TransactionsPage.vue
@@ -8,10 +8,8 @@ import type { Transaction } from '../types'
 import type { FuzzySearchOptions } from '@/composables/useFuzzySearch'
 import FuzzySearch from '@/components/ui/fuzzy-search/FuzzySearch.vue'
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
-import { Separator } from '@/components/ui/separator'
 import {
   CheckCircle2,
   Clock,
@@ -177,164 +175,158 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="container mx-auto p-4 max-w-4xl">
-    <!-- Header -->
-    <div class="mb-6">
-      <h1 class="text-2xl sm:text-3xl font-bold mb-2">My Transactions</h1>
-      <p class="text-muted-foreground">View your recent transaction history</p>
+  <div class="flex flex-col">
+    <!-- Compact Header -->
+    <div class="flex flex-col gap-3 p-4 md:p-6 border-b md:bg-card/50 md:backdrop-blur-sm">
+      <div class="w-full max-w-3xl mx-auto">
+        <div class="flex items-center justify-between mb-3">
+          <div>
+            <h1 class="text-lg md:text-xl font-bold">My Transactions</h1>
+            <p class="text-xs md:text-sm text-muted-foreground">View your recent transaction history</p>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            @click="loadTransactions"
+            :disabled="isLoading"
+            class="gap-2 md:h-10 md:px-4 hover:bg-accent transition-colors"
+          >
+            <RefreshCw :class="{ 'animate-spin': isLoading }" class="h-4 w-4" />
+            <span class="hidden md:inline">Refresh</span>
+          </Button>
+        </div>
+
+        <!-- Compact Controls Row -->
+        <div class="flex items-center gap-2 flex-wrap">
+          <Calendar class="h-4 w-4 text-muted-foreground" />
+          <Button
+            v-for="option in dayOptions"
+            :key="option.value"
+            :variant="selectedDays === option.value ? 'default' : 'outline'"
+            size="sm"
+            class="h-8 px-3 text-xs"
+            @click="changeDayFilter(option.value)"
+            :disabled="isLoading"
+          >
+            {{ option.label }}
+          </Button>
+        </div>
+      </div>
     </div>
 
-    <!-- Search Bar -->
-    <div class="mb-4">
-      <FuzzySearch
-        :data="transactions"
-        :options="searchOptions"
-        placeholder="Search transactions by description, payee, reference..."
-        @results="handleSearchResults"
-      />
-    </div>
+    <!-- Content Container -->
+    <div class="w-full max-w-3xl mx-auto px-0 md:px-4">
+      <!-- Search Bar -->
+      <div class="px-4 md:px-0 py-3">
+        <FuzzySearch
+          :data="transactions"
+          :options="searchOptions"
+          placeholder="Search transactions..."
+          @results="handleSearchResults"
+        />
+      </div>
 
-    <!-- Controls -->
-    <Card class="mb-4">
-      <CardContent class="pt-6">
-        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-          <!-- Day Filter -->
-          <div class="space-y-2">
-            <div class="text-sm text-muted-foreground flex items-center gap-2">
-              <Calendar class="h-4 w-4" />
-              <span>Show transactions from:</span>
+      <!-- Results Count -->
+      <div class="px-4 md:px-0 py-2 text-xs md:text-sm text-muted-foreground">
+        <span v-if="searchResults.length > 0">
+          Found {{ transactionsToDisplay.length }} matching transaction{{ transactionsToDisplay.length === 1 ? '' : 's' }}
+        </span>
+        <span v-else>
+          Showing {{ pagination.offset + 1 }} - {{ Math.min(pagination.offset + pagination.limit, pagination.total) }} of {{ pagination.total }} transactions
+        </span>
+      </div>
+
+      <!-- Loading State -->
+      <div v-if="isLoading" class="flex items-center justify-center py-12">
+        <div class="flex items-center gap-2">
+          <RefreshCw class="h-4 w-4 animate-spin" />
+          <span class="text-muted-foreground">Loading transactions...</span>
+        </div>
+      </div>
+
+      <!-- Empty State -->
+      <div v-else-if="transactionsToDisplay.length === 0" class="text-center py-12 px-4">
+        <p class="text-muted-foreground">No transactions found</p>
+        <p class="text-sm text-muted-foreground mt-2">
+          {{ searchResults.length > 0 ? 'Try a different search term' : 'Try selecting a different time period' }}
+        </p>
+      </div>
+
+      <!-- Transaction Items (Full-width on mobile, no nested cards) -->
+      <div v-else class="md:space-y-3 md:py-4">
+        <div
+          v-for="transaction in transactionsToDisplay"
+          :key="transaction.id"
+          class="border-b md:border md:rounded-lg p-4 hover:bg-muted/50 transition-colors"
+        >
+          <!-- Transaction Header -->
+          <div class="flex items-start justify-between gap-3 mb-2">
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-2 mb-1">
+                <!-- Status Icon -->
+                <component
+                  v-if="getStatusInfo(transaction.flag)"
+                  :is="getStatusInfo(transaction.flag)!.icon"
+                  :class="[
+                    'h-4 w-4 flex-shrink-0',
+                    getStatusInfo(transaction.flag)!.color
+                  ]"
+                />
+                <h3 class="font-medium text-sm sm:text-base truncate">
+                  {{ transaction.description }}
+                </h3>
+              </div>
+              <p class="text-xs sm:text-sm text-muted-foreground">
+                {{ formatDate(transaction.date) }}
+              </p>
             </div>
-            <div class="flex flex-wrap gap-2">
-              <Button
-                v-for="option in dayOptions"
-                :key="option.value"
-                :variant="selectedDays === option.value ? 'default' : 'outline'"
-                size="sm"
-                @click="changeDayFilter(option.value)"
-                :disabled="isLoading"
-              >
-                {{ option.label }}
-              </Button>
+
+            <!-- Amount -->
+            <div class="text-right flex-shrink-0">
+              <p class="font-semibold text-sm sm:text-base">
+                {{ formatAmount(transaction.amount) }} sats
+              </p>
+              <p v-if="transaction.fiat_amount" class="text-xs text-muted-foreground">
+                {{ transaction.fiat_amount.toFixed(2) }} {{ transaction.fiat_currency }}
+              </p>
             </div>
           </div>
 
-          <!-- Refresh Button -->
-          <Button variant="outline" size="sm" @click="loadTransactions" :disabled="isLoading">
-            <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': isLoading }" />
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-
-    <!-- Transactions List -->
-    <Card>
-      <CardHeader>
-        <CardTitle>Recent Transactions</CardTitle>
-        <CardDescription>
-          <span v-if="searchResults.length > 0">
-            Found {{ transactionsToDisplay.length }} matching transaction{{ transactionsToDisplay.length === 1 ? '' : 's' }}
-          </span>
-          <span v-else>
-            Showing {{ pagination.offset + 1 }} -
-            {{ Math.min(pagination.offset + pagination.limit, pagination.total) }} of
-            {{ pagination.total }} transactions
-          </span>
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <!-- Loading State -->
-        <div v-if="isLoading" class="text-center py-12">
-          <RefreshCw class="h-8 w-8 animate-spin mx-auto mb-4 text-muted-foreground" />
-          <p class="text-muted-foreground">Loading transactions...</p>
-        </div>
-
-        <!-- Empty State -->
-        <div v-else-if="transactionsToDisplay.length === 0" class="text-center py-12">
-          <p class="text-muted-foreground">No transactions found</p>
-          <p class="text-sm text-muted-foreground mt-2">
-            {{ searchResults.length > 0 ? 'Try a different search term' : 'Try selecting a different time period' }}
-          </p>
-        </div>
-
-        <!-- Transaction Items (Mobile-Optimized) -->
-        <div v-else class="space-y-3">
-          <div
-            v-for="(transaction, index) in transactionsToDisplay"
-            :key="transaction.id"
-            class="border rounded-lg p-4 hover:bg-muted/50 transition-colors"
-          >
-            <!-- Transaction Header -->
-            <div class="flex items-start justify-between gap-3 mb-2">
-              <div class="flex-1 min-w-0">
-                <div class="flex items-center gap-2 mb-1">
-                  <!-- Status Icon -->
-                  <component
-                    v-if="getStatusInfo(transaction.flag)"
-                    :is="getStatusInfo(transaction.flag)!.icon"
-                    :class="[
-                      'h-4 w-4 flex-shrink-0',
-                      getStatusInfo(transaction.flag)!.color
-                    ]"
-                  />
-                  <h3 class="font-medium text-sm sm:text-base truncate">
-                    {{ transaction.description }}
-                  </h3>
-                </div>
-                <p class="text-xs sm:text-sm text-muted-foreground">
-                  {{ formatDate(transaction.date) }}
-                </p>
-              </div>
-
-              <!-- Amount -->
-              <div class="text-right flex-shrink-0">
-                <p class="font-semibold text-sm sm:text-base">
-                  {{ formatAmount(transaction.amount) }} sats
-                </p>
-                <p v-if="transaction.fiat_amount" class="text-xs text-muted-foreground">
-                  {{ transaction.fiat_amount.toFixed(2) }} {{ transaction.fiat_currency }}
-                </p>
-              </div>
+          <!-- Transaction Details -->
+          <div class="space-y-1 text-xs sm:text-sm">
+            <!-- Payee -->
+            <div v-if="transaction.payee" class="text-muted-foreground">
+              <span class="font-medium">Payee:</span> {{ transaction.payee }}
             </div>
 
-            <!-- Transaction Details (Collapsible on mobile) -->
-            <div class="space-y-1 text-xs sm:text-sm">
-              <!-- Payee -->
-              <div v-if="transaction.payee" class="text-muted-foreground">
-                <span class="font-medium">Payee:</span> {{ transaction.payee }}
-              </div>
-
-              <!-- Reference -->
-              <div v-if="transaction.reference" class="text-muted-foreground">
-                <span class="font-medium">Ref:</span> {{ transaction.reference }}
-              </div>
-
-              <!-- Username (if available) -->
-              <div v-if="transaction.username" class="text-muted-foreground">
-                <span class="font-medium">User:</span> {{ transaction.username }}
-              </div>
-
-              <!-- Tags -->
-              <div v-if="transaction.tags && transaction.tags.length > 0" class="flex flex-wrap gap-1 mt-2">
-                <Badge v-for="tag in transaction.tags" :key="tag" variant="secondary" class="text-xs">
-                  {{ tag }}
-                </Badge>
-              </div>
-
-              <!-- Metadata Source -->
-              <div v-if="transaction.meta?.source" class="text-muted-foreground mt-1">
-                <span class="text-xs">Source: {{ transaction.meta.source }}</span>
-              </div>
+            <!-- Reference -->
+            <div v-if="transaction.reference" class="text-muted-foreground">
+              <span class="font-medium">Ref:</span> {{ transaction.reference }}
             </div>
 
-            <!-- Separator between items (except last) -->
-            <Separator v-if="index < transactionsToDisplay.length - 1" class="mt-3" />
+            <!-- Username (if available) -->
+            <div v-if="transaction.username" class="text-muted-foreground">
+              <span class="font-medium">User:</span> {{ transaction.username }}
+            </div>
+
+            <!-- Tags -->
+            <div v-if="transaction.tags && transaction.tags.length > 0" class="flex flex-wrap gap-1 mt-2">
+              <Badge v-for="tag in transaction.tags" :key="tag" variant="secondary" class="text-xs">
+                {{ tag }}
+              </Badge>
+            </div>
+
+            <!-- Metadata Source -->
+            <div v-if="transaction.meta?.source" class="text-muted-foreground mt-1">
+              <span class="text-xs">Source: {{ transaction.meta.source }}</span>
+            </div>
           </div>
         </div>
 
         <!-- Pagination (hide when searching) -->
         <div
           v-if="!isLoading && transactions.length > 0 && searchResults.length === 0 && (pagination.has_next || pagination.has_prev)"
-          class="flex items-center justify-between mt-6 pt-4 border-t"
+          class="flex items-center justify-between px-4 md:px-0 py-6 border-t"
         >
           <Button
             variant="outline"
@@ -360,7 +352,12 @@ onMounted(() => {
             <ChevronRight class="h-4 w-4 ml-1" />
           </Button>
         </div>
-      </CardContent>
-    </Card>
+
+        <!-- End of list indicator -->
+        <div v-if="transactionsToDisplay.length > 0" class="text-center py-6 text-md text-muted-foreground">
+          <p>🐢</p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>

From 509fae1d356dad35e4cf3670c20db61c8dc23163 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 14 Nov 2025 16:50:59 +0100
Subject: [PATCH 21/32] Remove pagination from TransactionsPage - load all
 transactions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed issue where users could only see 20 transactions at a time despite having more transactions in the selected time period.

Changes:
- **Removed pagination controls**: Eliminated prev/next page buttons and page counter
- **Load all transactions**: Set limit to 1000 to fetch all transactions for the selected time period
- **Natural scrolling**: Users can now scroll through all their transactions
- **Improved fuzzy search**: Search now works across ALL transactions, not just the current page
- **Simplified UI**: Cleaner interface without pagination complexity
- **Updated transaction count**: Now shows total count instead of "X-Y of Z"

Previous behavior:
- Limited to 20 transactions per page
- Required manual pagination to see more
- Fuzzy search only searched current page (20 transactions)

New behavior:
- Loads up to 1000 transactions at once
- Single scrollable list
- Fuzzy search works across all loaded transactions
- Lightweight (text-only data)

🐢 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../expenses/views/TransactionsPage.vue       | 69 +------------------
 1 file changed, 3 insertions(+), 66 deletions(-)

diff --git a/src/modules/expenses/views/TransactionsPage.vue b/src/modules/expenses/views/TransactionsPage.vue
index 9dcd525..30e4e5e 100644
--- a/src/modules/expenses/views/TransactionsPage.vue
+++ b/src/modules/expenses/views/TransactionsPage.vue
@@ -16,8 +16,6 @@ import {
   Flag,
   XCircle,
   RefreshCw,
-  ChevronLeft,
-  ChevronRight,
   Calendar
 } from 'lucide-vue-next'
 
@@ -28,13 +26,6 @@ const expensesAPI = injectService<ExpensesAPI>(SERVICE_TOKENS.EXPENSES_API)
 const transactions = ref<Transaction[]>([])
 const isLoading = ref(false)
 const selectedDays = ref(5)
-const pagination = ref({
-  total: 0,
-  limit: 20,
-  offset: 0,
-  has_next: false,
-  has_prev: false
-})
 
 const walletKey = computed(() => user.value?.wallets?.[0]?.inkey)
 
@@ -123,19 +114,12 @@ async function loadTransactions() {
   isLoading.value = true
   try {
     const response = await expensesAPI.getUserTransactions(walletKey.value, {
-      limit: pagination.value.limit,
-      offset: pagination.value.offset,
+      limit: 1000, // Load all transactions (no pagination needed)
+      offset: 0,
       days: selectedDays.value
     })
 
     transactions.value = response.entries
-    pagination.value = {
-      total: response.total,
-      limit: response.limit,
-      offset: response.offset,
-      has_next: response.has_next,
-      has_prev: response.has_prev
-    }
   } catch (error) {
     console.error('Failed to load transactions:', error)
     toast.error('Failed to load transactions', {
@@ -149,26 +133,9 @@ async function loadTransactions() {
 // Change day filter
 function changeDayFilter(days: number) {
   selectedDays.value = days
-  pagination.value.offset = 0 // Reset to first page
   loadTransactions()
 }
 
-// Next page
-function nextPage() {
-  if (pagination.value.has_next) {
-    pagination.value.offset += pagination.value.limit
-    loadTransactions()
-  }
-}
-
-// Previous page
-function prevPage() {
-  if (pagination.value.has_prev) {
-    pagination.value.offset = Math.max(0, pagination.value.offset - pagination.value.limit)
-    loadTransactions()
-  }
-}
-
 onMounted(() => {
   loadTransactions()
 })
@@ -232,7 +199,7 @@ onMounted(() => {
           Found {{ transactionsToDisplay.length }} matching transaction{{ transactionsToDisplay.length === 1 ? '' : 's' }}
         </span>
         <span v-else>
-          Showing {{ pagination.offset + 1 }} - {{ Math.min(pagination.offset + pagination.limit, pagination.total) }} of {{ pagination.total }} transactions
+          {{ transactions.length }} transaction{{ transactions.length === 1 ? '' : 's' }}
         </span>
       </div>
 
@@ -323,36 +290,6 @@ onMounted(() => {
           </div>
         </div>
 
-        <!-- Pagination (hide when searching) -->
-        <div
-          v-if="!isLoading && transactions.length > 0 && searchResults.length === 0 && (pagination.has_next || pagination.has_prev)"
-          class="flex items-center justify-between px-4 md:px-0 py-6 border-t"
-        >
-          <Button
-            variant="outline"
-            size="sm"
-            @click="prevPage"
-            :disabled="!pagination.has_prev || isLoading"
-          >
-            <ChevronLeft class="h-4 w-4 mr-1" />
-            <span class="hidden sm:inline">Previous</span>
-          </Button>
-
-          <span class="text-sm text-muted-foreground">
-            Page {{ Math.floor(pagination.offset / pagination.limit) + 1 }}
-          </span>
-
-          <Button
-            variant="outline"
-            size="sm"
-            @click="nextPage"
-            :disabled="!pagination.has_next || isLoading"
-          >
-            <span class="hidden sm:inline">Next</span>
-            <ChevronRight class="h-4 w-4 ml-1" />
-          </Button>
-        </div>
-
         <!-- End of list indicator -->
         <div v-if="transactionsToDisplay.length > 0" class="text-center py-6 text-md text-muted-foreground">
           <p>🐢</p>

From 84596e518eed5fa205ffca2b36e5e2306d1fdf93 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 14 Nov 2025 22:38:34 +0100
Subject: [PATCH 22/32] Update TransactionsPage to match castle extension date
 range API changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Synchronized TransactionsPage with castle LNbits extension API updates that introduced custom date range filtering.

**API Changes (ExpensesAPI.ts):**
- Updated `getUserTransactions()` to support `start_date` and `end_date` parameters (YYYY-MM-DD format)
- Custom date range takes precedence over preset days parameter
- Updated comment: default changed from 5 to 15 days, options now 15/30/60 (removed 5 and 90)

**UI Changes (TransactionsPage.vue):**
- **New defaults**: Changed default from 5 days to 15 days
- **New preset options**: 15, 30, 60 days (removed 5 and 90 day options)
- **Custom date range**: Added "Custom" option with date picker inputs
  - From/To date inputs using native HTML5 date picker
  - Apply button to load transactions for custom range
  - Auto-clears custom dates when switching back to preset days
- **State management**:
  - `dateRangeType` ref supports both numbers (15, 30, 60) and 'custom' string
  - `customStartDate` and `customEndDate` refs for custom date range
- **Smart loading**: Only loads transactions after user provides both dates and clicks Apply

**Priority Logic:**
- Custom date range (start_date + end_date) takes precedence
- Falls back to preset days if custom not selected
- Defaults to 15 days if custom selected but dates not provided

Matches castle extension implementation exactly (see castle extension git diff in fava_client.py, views_api.py, and static/js/index.js).

🐢 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/modules/expenses/services/ExpensesAPI.ts  |  14 +-
 .../expenses/views/TransactionsPage.vue       | 124 ++++++++++++++----
 2 files changed, 109 insertions(+), 29 deletions(-)

diff --git a/src/modules/expenses/services/ExpensesAPI.ts b/src/modules/expenses/services/ExpensesAPI.ts
index a8ba7c2..9beaaa5 100644
--- a/src/modules/expenses/services/ExpensesAPI.ts
+++ b/src/modules/expenses/services/ExpensesAPI.ts
@@ -404,7 +404,9 @@ export class ExpensesAPI extends BaseService {
     options?: {
       limit?: number
       offset?: number
-      days?: number // 5, 30, 60, or 90
+      days?: number // 15, 30, or 60 (default: 15)
+      start_date?: string // ISO format: YYYY-MM-DD
+      end_date?: string // ISO format: YYYY-MM-DD
       filter_user_id?: string
       filter_account_type?: string
     }
@@ -415,7 +417,15 @@ export class ExpensesAPI extends BaseService {
       // Add query parameters
       if (options?.limit) url.searchParams.set('limit', String(options.limit))
       if (options?.offset) url.searchParams.set('offset', String(options.offset))
-      if (options?.days) url.searchParams.set('days', String(options.days))
+
+      // Custom date range takes precedence over days
+      if (options?.start_date && options?.end_date) {
+        url.searchParams.set('start_date', options.start_date)
+        url.searchParams.set('end_date', options.end_date)
+      } else if (options?.days) {
+        url.searchParams.set('days', String(options.days))
+      }
+
       if (options?.filter_user_id)
         url.searchParams.set('filter_user_id', options.filter_user_id)
       if (options?.filter_account_type)
diff --git a/src/modules/expenses/views/TransactionsPage.vue b/src/modules/expenses/views/TransactionsPage.vue
index 30e4e5e..f7845d7 100644
--- a/src/modules/expenses/views/TransactionsPage.vue
+++ b/src/modules/expenses/views/TransactionsPage.vue
@@ -10,6 +10,7 @@ import FuzzySearch from '@/components/ui/fuzzy-search/FuzzySearch.vue'
 
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
+import { Input } from '@/components/ui/input'
 import {
   CheckCircle2,
   Clock,
@@ -25,7 +26,9 @@ const expensesAPI = injectService<ExpensesAPI>(SERVICE_TOKENS.EXPENSES_API)
 
 const transactions = ref<Transaction[]>([])
 const isLoading = ref(false)
-const selectedDays = ref(5)
+const dateRangeType = ref<number | 'custom'>(15) // 15, 30, 60, or 'custom'
+const customStartDate = ref<string>('')
+const customEndDate = ref<string>('')
 
 const walletKey = computed(() => user.value?.wallets?.[0]?.inkey)
 
@@ -62,12 +65,12 @@ function handleSearchResults(results: Transaction[]) {
   searchResults.value = results
 }
 
-// Day filter options
-const dayOptions = [
-  { label: '5 days', value: 5 },
+// Date range options (matching castle LNbits extension)
+const dateRangeOptions = [
+  { label: '15 days', value: 15 },
   { label: '30 days', value: 30 },
   { label: '60 days', value: 60 },
-  { label: '90 days', value: 90 }
+  { label: 'Custom', value: 'custom' as const }
 ]
 
 // Format date for display
@@ -113,12 +116,27 @@ async function loadTransactions() {
 
   isLoading.value = true
   try {
-    const response = await expensesAPI.getUserTransactions(walletKey.value, {
+    // Build query params - custom date range takes precedence over preset days
+    const params: any = {
       limit: 1000, // Load all transactions (no pagination needed)
-      offset: 0,
-      days: selectedDays.value
-    })
+      offset: 0
+    }
 
+    if (dateRangeType.value === 'custom') {
+      // Use custom date range
+      if (customStartDate.value && customEndDate.value) {
+        params.start_date = customStartDate.value
+        params.end_date = customEndDate.value
+      } else {
+        // Default to 15 days if custom selected but dates not provided
+        params.days = 15
+      }
+    } else {
+      // Use preset days
+      params.days = dateRangeType.value
+    }
+
+    const response = await expensesAPI.getUserTransactions(walletKey.value, params)
     transactions.value = response.entries
   } catch (error) {
     console.error('Failed to load transactions:', error)
@@ -130,10 +148,29 @@ async function loadTransactions() {
   }
 }
 
-// Change day filter
-function changeDayFilter(days: number) {
-  selectedDays.value = days
-  loadTransactions()
+// Handle date range type change
+function onDateRangeTypeChange(value: number | 'custom') {
+  dateRangeType.value = value
+
+  if (value !== 'custom') {
+    // Clear custom dates when switching to preset days
+    customStartDate.value = ''
+    customEndDate.value = ''
+    // Load transactions immediately with preset days
+    loadTransactions()
+  }
+  // If switching to custom, wait for user to provide dates
+}
+
+// Apply custom date range
+function applyCustomDateRange() {
+  if (customStartDate.value && customEndDate.value) {
+    loadTransactions()
+  } else {
+    toast.error('Invalid date range', {
+      description: 'Please select both start and end dates'
+    })
+  }
 }
 
 onMounted(() => {
@@ -163,20 +200,53 @@ onMounted(() => {
           </Button>
         </div>
 
-        <!-- Compact Controls Row -->
-        <div class="flex items-center gap-2 flex-wrap">
-          <Calendar class="h-4 w-4 text-muted-foreground" />
-          <Button
-            v-for="option in dayOptions"
-            :key="option.value"
-            :variant="selectedDays === option.value ? 'default' : 'outline'"
-            size="sm"
-            class="h-8 px-3 text-xs"
-            @click="changeDayFilter(option.value)"
-            :disabled="isLoading"
-          >
-            {{ option.label }}
-          </Button>
+        <!-- Date Range Controls -->
+        <div class="flex flex-col gap-3">
+          <!-- Preset Days / Custom Toggle -->
+          <div class="flex items-center gap-2 flex-wrap">
+            <Calendar class="h-4 w-4 text-muted-foreground" />
+            <Button
+              v-for="option in dateRangeOptions"
+              :key="option.value"
+              :variant="dateRangeType === option.value ? 'default' : 'outline'"
+              size="sm"
+              class="h-8 px-3 text-xs"
+              @click="onDateRangeTypeChange(option.value)"
+              :disabled="isLoading"
+            >
+              {{ option.label }}
+            </Button>
+          </div>
+
+          <!-- Custom Date Range Inputs -->
+          <div v-if="dateRangeType === 'custom'" class="flex items-end gap-2 flex-wrap">
+            <div class="flex flex-col gap-1">
+              <label class="text-xs text-muted-foreground">From:</label>
+              <Input
+                type="date"
+                v-model="customStartDate"
+                class="h-8 text-xs"
+                :disabled="isLoading"
+              />
+            </div>
+            <div class="flex flex-col gap-1">
+              <label class="text-xs text-muted-foreground">To:</label>
+              <Input
+                type="date"
+                v-model="customEndDate"
+                class="h-8 text-xs"
+                :disabled="isLoading"
+              />
+            </div>
+            <Button
+              size="sm"
+              class="h-8 px-3 text-xs"
+              @click="applyCustomDateRange"
+              :disabled="isLoading || !customStartDate || !customEndDate"
+            >
+              Apply
+            </Button>
+          </div>
         </div>
       </div>
     </div>

From 91aecd21920c37b4727a8604ec62454b02fffc85 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 14 Nov 2025 22:40:11 +0100
Subject: [PATCH 23/32] Simplify TransactionsPage header to 'Transaction
 History'
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed redundant subtitle and simplified header to just "Transaction History" for cleaner, more concise UI.

Before:
- Title: "My Transactions"
- Subtitle: "View your recent transaction history"

After:
- Title: "Transaction History"
- No subtitle

🐢 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/modules/expenses/views/TransactionsPage.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/modules/expenses/views/TransactionsPage.vue b/src/modules/expenses/views/TransactionsPage.vue
index f7845d7..de67fbc 100644
--- a/src/modules/expenses/views/TransactionsPage.vue
+++ b/src/modules/expenses/views/TransactionsPage.vue
@@ -184,10 +184,7 @@ onMounted(() => {
     <div class="flex flex-col gap-3 p-4 md:p-6 border-b md:bg-card/50 md:backdrop-blur-sm">
       <div class="w-full max-w-3xl mx-auto">
         <div class="flex items-center justify-between mb-3">
-          <div>
-            <h1 class="text-lg md:text-xl font-bold">My Transactions</h1>
-            <p class="text-xs md:text-sm text-muted-foreground">View your recent transaction history</p>
-          </div>
+          <h1 class="text-lg md:text-xl font-bold">Transaction History</h1>
           <Button
             variant="outline"
             size="sm"

From 2e6f215157980f28193a37e5c91d150920faed48 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 16 Nov 2025 16:20:13 +0100
Subject: [PATCH 24/32] Rename 'Events' to 'Tasks' in NostrFeed to avoid
 confusion with Events module
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed terminology in the scheduled events section of NostrFeed to use "Tasks" instead of "Events" to prevent confusion with the Events module (which handles event ticketing).

**Changes:**
- "Today's Events" → "Today's Tasks"
- "Yesterday's Events" → "Yesterday's Tasks"
- "Tomorrow's Events" → "Tomorrow's Tasks"
- "Events for Mon, Jan 15" → "Tasks for Mon, Jan 15"
- Updated comments: "Scheduled Events" → "Scheduled Tasks"

**Rationale:**
- **NostrFeed scheduled items** = Daily tasks and announcements (NIP-52 calendar events)
- **Events module** = Event ticketing system (concerts, conferences, etc.)
- Using "Tasks" makes it clear these are to-do items, not ticketed events

Empty state message already correctly used "tasks" terminology and remains unchanged.

🐢 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../nostr-feed/components/NostrFeed.vue        | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/modules/nostr-feed/components/NostrFeed.vue b/src/modules/nostr-feed/components/NostrFeed.vue
index 2d0aa4c..9c431df 100644
--- a/src/modules/nostr-feed/components/NostrFeed.vue
+++ b/src/modules/nostr-feed/components/NostrFeed.vue
@@ -101,10 +101,10 @@ const { getEventReactions, subscribeToReactions, toggleLike } = useReactions()
 // Use scheduled events service
 const { getEventsForSpecificDate, getCompletion, toggleComplete, allCompletions } = useScheduledEvents()
 
-// Selected date for viewing events (defaults to today)
+// Selected date for viewing scheduled tasks (defaults to today)
 const selectedDate = ref(new Date().toISOString().split('T')[0])
 
-// Get scheduled events for the selected date (reactive)
+// Get scheduled tasks for the selected date (reactive)
 const scheduledEventsForDate = computed(() => getEventsForSpecificDate(selectedDate.value))
 
 // Navigate to previous day
@@ -143,20 +143,20 @@ const dateDisplayText = computed(() => {
   const tomorrowStr = tomorrow.toISOString().split('T')[0]
 
   if (selectedDate.value === today) {
-    return "Today's Events"
+    return "Today's Tasks"
   } else if (selectedDate.value === yesterdayStr) {
-    return "Yesterday's Events"
+    return "Yesterday's Tasks"
   } else if (selectedDate.value === tomorrowStr) {
-    return "Tomorrow's Events"
+    return "Tomorrow's Tasks"
   } else {
-    // Format as "Events for Mon, Jan 15"
+    // Format as "Tasks for Mon, Jan 15"
     const date = new Date(selectedDate.value + 'T00:00:00')
     const formatted = date.toLocaleDateString('en-US', {
       weekday: 'short',
       month: 'short',
       day: 'numeric'
     })
-    return `Events for ${formatted}`
+    return `Tasks for ${formatted}`
   }
 })
 
@@ -466,7 +466,7 @@ function cancelDelete() {
 
       <!-- Posts List - Natural flow without internal scrolling -->
       <div v-else>
-        <!-- Scheduled Events Section with Date Navigation -->
+        <!-- Scheduled Tasks Section with Date Navigation -->
         <div class="my-2 md:my-4">
           <div class="flex items-center justify-between px-4 md:px-0 mb-3">
             <!-- Left Arrow -->
@@ -506,7 +506,7 @@ function cancelDelete() {
             </Button>
           </div>
 
-          <!-- Events List or Empty State -->
+          <!-- Scheduled Tasks List or Empty State -->
           <div v-if="scheduledEventsForDate.length > 0" class="md:space-y-3">
             <ScheduledEventCard
               v-for="event in scheduledEventsForDate"

From d497cfa4d961574e8a9a946fac894f7e028882c2 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 16 Nov 2025 16:45:45 +0100
Subject: [PATCH 25/32] Implement task status workflow: claimed, in-progress,
 completed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added granular task state management to scheduled events/tasks with three states plus unclaimed. Tasks now support a full workflow from claiming to completion with visual feedback at each stage.

**New Task States:**
- **Unclaimed** (no RSVP event) - Task available for anyone to claim
- **Claimed** - User has reserved the task but hasn't started
- **In Progress** - User is actively working on the task
- **Completed** - Task is done
- **Blocked** - Task is stuck (supported but not yet used in UI)
- **Cancelled** - Task won't be completed (supported but not yet used in UI)

**Service Layer (ScheduledEventService.ts):**
- Updated `EventCompletion` interface: replaced `completed: boolean` with `taskStatus: TaskStatus`
- Added `TaskStatus` type: `'claimed' | 'in-progress' | 'completed' | 'blocked' | 'cancelled'`
- New methods: `claimTask()`, `startTask()`, `getTaskStatus()`
- Refactored `completeEvent()` and renamed `uncompleteEvent()` to `unclaimTask()`
- Internal `updateTaskStatus()` method handles all state changes
- Uses `task-status` tag instead of `completed` tag in Nostr events
- `unclaimTask()` publishes deletion event (kind 5) to remove RSVP
- Backward compatibility: reads old `completed` tag and converts to new taskStatus

**Composable (useScheduledEvents.ts):**
- Exported new methods: `claimTask`, `startTask`, `unclaimTask`, `getTaskStatus`
- Updated `completeEvent` signature to accept occurrence parameter
- Marked `toggleComplete` as deprecated (still works for compatibility)

**UI (ScheduledEventCard.vue):**
- Context-aware action buttons based on current task status:
  - Unclaimed: "Claim Task" button
  - Claimed: "Start Task" + "Unclaim" buttons
  - In Progress: "Mark Complete" + "Unclaim" buttons
  - Completed: "Unclaim" button only
- Status badges with icons and color coding:
  - 👋 Claimed (blue)
  - 🔄 In Progress (orange)
  - ✓ Completed (green)
- Shows who claimed/is working on/completed each task
- Unified confirmation dialog for all actions
- Quick action buttons in collapsed view
- Full button set in expanded view

**Feed Integration (NostrFeed.vue):**
- Added handlers: `onClaimTask`, `onStartTask`, `onCompleteTask`, `onUnclaimTask`
- Passes `getTaskStatus` prop to ScheduledEventCard
- Wired up all new event emitters

**Nostr Protocol:**
- Uses NIP-52 Calendar Event RSVP (kind 31925)
- Custom `task-status` tag for granular state tracking
- Deletion events (kind 5) for unclaiming tasks
- Fully decentralized - all state stored on Nostr relays

🐢 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../nostr-feed/components/NostrFeed.vue       |  55 +++-
 .../components/ScheduledEventCard.vue         | 260 +++++++++++++++---
 .../composables/useScheduledEvents.ts         | 102 ++++++-
 .../services/ScheduledEventService.ts         | 135 ++++++---
 4 files changed, 452 insertions(+), 100 deletions(-)

diff --git a/src/modules/nostr-feed/components/NostrFeed.vue b/src/modules/nostr-feed/components/NostrFeed.vue
index 9c431df..b3dfc22 100644
--- a/src/modules/nostr-feed/components/NostrFeed.vue
+++ b/src/modules/nostr-feed/components/NostrFeed.vue
@@ -99,7 +99,16 @@ const { getDisplayName, fetchProfiles } = useProfiles()
 const { getEventReactions, subscribeToReactions, toggleLike } = useReactions()
 
 // Use scheduled events service
-const { getEventsForSpecificDate, getCompletion, toggleComplete, allCompletions } = useScheduledEvents()
+const {
+  getEventsForSpecificDate,
+  getCompletion,
+  getTaskStatus,
+  claimTask,
+  startTask,
+  completeEvent,
+  unclaimTask,
+  allCompletions
+} = useScheduledEvents()
 
 // Selected date for viewing scheduled tasks (defaults to today)
 const selectedDate = ref(new Date().toISOString().split('T')[0])
@@ -255,14 +264,40 @@ async function onToggleLike(note: FeedPost) {
   }
 }
 
-// Handle scheduled event completion toggle
-async function onToggleComplete(event: ScheduledEvent, occurrence?: string) {
-  console.log('🎯 NostrFeed: onToggleComplete called for event:', event.title, 'occurrence:', occurrence)
+// Task action handlers
+async function onClaimTask(event: ScheduledEvent, occurrence?: string) {
+  console.log('👋 NostrFeed: Claiming task:', event.title)
   try {
-    await toggleComplete(event, occurrence)
-    console.log('✅ NostrFeed: toggleComplete succeeded')
+    await claimTask(event, '', occurrence)
   } catch (error) {
-    console.error('❌ NostrFeed: Failed to toggle event completion:', error)
+    console.error('❌ Failed to claim task:', error)
+  }
+}
+
+async function onStartTask(event: ScheduledEvent, occurrence?: string) {
+  console.log('▶️ NostrFeed: Starting task:', event.title)
+  try {
+    await startTask(event, '', occurrence)
+  } catch (error) {
+    console.error('❌ Failed to start task:', error)
+  }
+}
+
+async function onCompleteTask(event: ScheduledEvent, occurrence?: string) {
+  console.log('✅ NostrFeed: Completing task:', event.title)
+  try {
+    await completeEvent(event, occurrence, '')
+  } catch (error) {
+    console.error('❌ Failed to complete task:', error)
+  }
+}
+
+async function onUnclaimTask(event: ScheduledEvent, occurrence?: string) {
+  console.log('🔙 NostrFeed: Unclaiming task:', event.title)
+  try {
+    await unclaimTask(event, occurrence)
+  } catch (error) {
+    console.error('❌ Failed to unclaim task:', error)
   }
 }
 
@@ -514,8 +549,12 @@ function cancelDelete() {
               :event="event"
               :get-display-name="getDisplayName"
               :get-completion="getCompletion"
+              :get-task-status="getTaskStatus"
               :admin-pubkeys="adminPubkeys"
-              @toggle-complete="onToggleComplete"
+              @claim-task="onClaimTask"
+              @start-task="onStartTask"
+              @complete-task="onCompleteTask"
+              @unclaim-task="onUnclaimTask"
             />
           </div>
           <div v-else class="text-center py-3 text-muted-foreground text-sm px-4">
diff --git a/src/modules/nostr-feed/components/ScheduledEventCard.vue b/src/modules/nostr-feed/components/ScheduledEventCard.vue
index dfc48af..d6e4ef1 100644
--- a/src/modules/nostr-feed/components/ScheduledEventCard.vue
+++ b/src/modules/nostr-feed/components/ScheduledEventCard.vue
@@ -15,18 +15,22 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@/components/ui/collapsible'
-import { Calendar, MapPin, Clock, CheckCircle } from 'lucide-vue-next'
-import type { ScheduledEvent, EventCompletion } from '../services/ScheduledEventService'
+import { Calendar, MapPin, Clock, CheckCircle, PlayCircle, Hand } from 'lucide-vue-next'
+import type { ScheduledEvent, EventCompletion, TaskStatus } from '../services/ScheduledEventService'
 
 interface Props {
   event: ScheduledEvent
   getDisplayName: (pubkey: string) => string
   getCompletion: (eventAddress: string, occurrence?: string) => EventCompletion | undefined
+  getTaskStatus: (eventAddress: string, occurrence?: string) => TaskStatus | null
   adminPubkeys?: string[]
 }
 
 interface Emits {
-  (e: 'toggle-complete', event: ScheduledEvent, occurrence?: string): void
+  (e: 'claim-task', event: ScheduledEvent, occurrence?: string): void
+  (e: 'start-task', event: ScheduledEvent, occurrence?: string): void
+  (e: 'complete-task', event: ScheduledEvent, occurrence?: string): void
+  (e: 'unclaim-task', event: ScheduledEvent, occurrence?: string): void
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -53,12 +57,29 @@ const occurrence = computed(() => {
 // Check if this is an admin event
 const isAdminEvent = computed(() => props.adminPubkeys.includes(props.event.pubkey))
 
-// Check if event is completed - call function with occurrence for recurring events
-const isCompleted = computed(() => props.getCompletion(eventAddress.value, occurrence.value)?.completed || false)
+// Get current task status
+const taskStatus = computed(() => props.getTaskStatus(eventAddress.value, occurrence.value))
 
 // Check if event is completable (task type)
 const isCompletable = computed(() => props.event.eventType === 'task')
 
+// Get completion data
+const completion = computed(() => props.getCompletion(eventAddress.value, occurrence.value))
+
+// Status badges configuration
+const statusConfig = computed(() => {
+  switch (taskStatus.value) {
+    case 'claimed':
+      return { label: 'Claimed', variant: 'secondary' as const, icon: Hand, color: 'text-blue-600' }
+    case 'in-progress':
+      return { label: 'In Progress', variant: 'default' as const, icon: PlayCircle, color: 'text-orange-600' }
+    case 'completed':
+      return { label: 'Completed', variant: 'secondary' as const, icon: CheckCircle, color: 'text-green-600' }
+    default:
+      return null
+  }
+})
+
 // Format the date/time
 const formattedDate = computed(() => {
   try {
@@ -110,28 +131,102 @@ const formattedTimeRange = computed(() => {
   }
 })
 
-// Handle mark complete button click - show confirmation dialog
-function handleMarkComplete() {
-  console.log('🔘 Mark Complete button clicked for event:', props.event.title)
+// Action type for confirmation dialog
+const pendingAction = ref<'claim' | 'start' | 'complete' | 'unclaim' | null>(null)
+
+// Handle claim task
+function handleClaimTask() {
+  pendingAction.value = 'claim'
   showConfirmDialog.value = true
 }
 
-// Confirm and execute mark complete
-function confirmMarkComplete() {
-  console.log('✅ Confirmed mark complete for event:', props.event.title, 'occurrence:', occurrence.value)
-  emit('toggle-complete', props.event, occurrence.value)
-  showConfirmDialog.value = false
+// Handle start task
+function handleStartTask() {
+  pendingAction.value = 'start'
+  showConfirmDialog.value = true
 }
 
-// Cancel mark complete
-function cancelMarkComplete() {
-  showConfirmDialog.value = false
+// Handle complete task
+function handleCompleteTask() {
+  pendingAction.value = 'complete'
+  showConfirmDialog.value = true
 }
+
+// Handle unclaim task
+function handleUnclaimTask() {
+  pendingAction.value = 'unclaim'
+  showConfirmDialog.value = true
+}
+
+// Confirm action
+function confirmAction() {
+  if (!pendingAction.value) return
+
+  switch (pendingAction.value) {
+    case 'claim':
+      emit('claim-task', props.event, occurrence.value)
+      break
+    case 'start':
+      emit('start-task', props.event, occurrence.value)
+      break
+    case 'complete':
+      emit('complete-task', props.event, occurrence.value)
+      break
+    case 'unclaim':
+      emit('unclaim-task', props.event, occurrence.value)
+      break
+  }
+
+  showConfirmDialog.value = false
+  pendingAction.value = null
+}
+
+// Cancel action
+function cancelAction() {
+  showConfirmDialog.value = false
+  pendingAction.value = null
+}
+
+// Get dialog content based on pending action
+const dialogContent = computed(() => {
+  switch (pendingAction.value) {
+    case 'claim':
+      return {
+        title: 'Claim Task?',
+        description: `This will mark "${props.event.title}" as claimed by you. You can start working on it later.`,
+        confirmText: 'Claim Task'
+      }
+    case 'start':
+      return {
+        title: 'Start Task?',
+        description: `This will mark "${props.event.title}" as in-progress. Others will see you're actively working on it.`,
+        confirmText: 'Start Task'
+      }
+    case 'complete':
+      return {
+        title: 'Complete Task?',
+        description: `This will mark "${props.event.title}" as completed by you. Other users will be able to see that you completed this task.`,
+        confirmText: 'Mark Complete'
+      }
+    case 'unclaim':
+      return {
+        title: 'Unclaim Task?',
+        description: `This will remove your claim on "${props.event.title}" and make it available for others.`,
+        confirmText: 'Unclaim Task'
+      }
+    default:
+      return {
+        title: '',
+        description: '',
+        confirmText: ''
+      }
+  }
+})
 </script>
 
 <template>
   <Collapsible class="border-b md:border md:rounded-lg bg-card transition-all"
-               :class="{ 'opacity-60': isCompletable && isCompleted }">
+               :class="{ 'opacity-60': isCompletable && taskStatus === 'completed' }">
     <!-- Collapsed View (Trigger) -->
     <CollapsibleTrigger as-child>
       <div class="flex items-center gap-3 p-3 md:p-4 cursor-pointer hover:bg-accent/50 transition-colors">
@@ -143,26 +238,50 @@ function cancelMarkComplete() {
 
         <!-- Title -->
         <h3 class="font-semibold text-sm md:text-base flex-1 truncate"
-            :class="{ 'line-through': isCompletable && isCompleted }">
+            :class="{ 'line-through': isCompletable && taskStatus === 'completed' }">
           {{ event.title }}
         </h3>
 
         <!-- Badges and Actions -->
         <div class="flex items-center gap-2 shrink-0">
-          <!-- Mark Complete Button (for uncompleted tasks) -->
+          <!-- Quick Action Button (context-aware) -->
           <Button
-            v-if="isCompletable && !isCompleted"
-            @click.stop="handleMarkComplete"
+            v-if="isCompletable && !taskStatus"
+            @click.stop="handleClaimTask"
             variant="ghost"
             size="sm"
-            class="h-7 w-7 p-0"
+            class="h-7 px-2 text-xs gap-1"
           >
-            <CheckCircle class="h-4 w-4" />
+            <Hand class="h-3.5 w-3.5" />
+            <span class="hidden sm:inline">Claim</span>
           </Button>
 
-          <!-- Completed Badge with completer name -->
-          <Badge v-if="isCompletable && isCompleted && getCompletion(eventAddress, occurrence)" variant="secondary" class="text-xs">
-            ✓ {{ getDisplayName(getCompletion(eventAddress, occurrence)!.pubkey) }}
+          <Button
+            v-else-if="isCompletable && taskStatus === 'claimed'"
+            @click.stop="handleStartTask"
+            variant="ghost"
+            size="sm"
+            class="h-7 px-2 text-xs gap-1"
+          >
+            <PlayCircle class="h-3.5 w-3.5" />
+            <span class="hidden sm:inline">Start</span>
+          </Button>
+
+          <Button
+            v-else-if="isCompletable && taskStatus === 'in-progress'"
+            @click.stop="handleCompleteTask"
+            variant="ghost"
+            size="sm"
+            class="h-7 px-2 text-xs gap-1"
+          >
+            <CheckCircle class="h-3.5 w-3.5" />
+            <span class="hidden sm:inline">Complete</span>
+          </Button>
+
+          <!-- Status Badge with claimer/completer name -->
+          <Badge v-if="isCompletable && statusConfig && completion" :variant="statusConfig.variant" class="text-xs gap-1">
+            <component :is="statusConfig.icon" class="h-3 w-3" :class="statusConfig.color" />
+            <span>{{ getDisplayName(completion.pubkey) }}</span>
           </Badge>
 
           <!-- Recurring Badge -->
@@ -200,10 +319,20 @@ function cancelMarkComplete() {
           <p class="whitespace-pre-wrap break-words">{{ event.description || event.content }}</p>
         </div>
 
-        <!-- Completion info (only for completable events) -->
-        <div v-if="isCompletable && isCompleted && getCompletion(eventAddress, occurrence)" class="text-xs text-muted-foreground mb-3">
-          ✓ Completed by {{ getDisplayName(getCompletion(eventAddress, occurrence)!.pubkey) }}
-          <span v-if="getCompletion(eventAddress, occurrence)!.notes"> - {{ getCompletion(eventAddress, occurrence)!.notes }}</span>
+        <!-- Task Status Info (only for completable events with status) -->
+        <div v-if="isCompletable && completion" class="text-xs mb-3">
+          <div v-if="taskStatus === 'completed'" class="text-muted-foreground">
+            ✓ Completed by {{ getDisplayName(completion.pubkey) }}
+            <span v-if="completion.notes"> - {{ completion.notes }}</span>
+          </div>
+          <div v-else-if="taskStatus === 'in-progress'" class="text-orange-600 dark:text-orange-400 font-medium">
+            🔄 In Progress by {{ getDisplayName(completion.pubkey) }}
+            <span v-if="completion.notes"> - {{ completion.notes }}</span>
+          </div>
+          <div v-else-if="taskStatus === 'claimed'" class="text-blue-600 dark:text-blue-400 font-medium">
+            👋 Claimed by {{ getDisplayName(completion.pubkey) }}
+            <span v-if="completion.notes"> - {{ completion.notes }}</span>
+          </div>
         </div>
 
         <!-- Author (if not admin) -->
@@ -211,17 +340,70 @@ function cancelMarkComplete() {
           Posted by {{ getDisplayName(event.pubkey) }}
         </div>
 
-        <!-- Mark Complete Button (only for completable task events) -->
-        <div v-if="isCompletable && !isCompleted" class="mt-3">
+        <!-- Action Buttons (only for completable task events) -->
+        <div v-if="isCompletable" class="mt-3 flex flex-wrap gap-2">
+          <!-- Unclaimed Task -->
           <Button
-            @click.stop="handleMarkComplete"
+            v-if="!taskStatus"
+            @click.stop="handleClaimTask"
             variant="outline"
             size="sm"
             class="gap-2"
           >
-            <CheckCircle class="h-4 w-4" />
-            Mark Complete
+            <Hand class="h-4 w-4" />
+            Claim Task
           </Button>
+
+          <!-- Claimed Task -->
+          <template v-else-if="taskStatus === 'claimed'">
+            <Button
+              @click.stop="handleStartTask"
+              variant="default"
+              size="sm"
+              class="gap-2"
+            >
+              <PlayCircle class="h-4 w-4" />
+              Start Task
+            </Button>
+            <Button
+              @click.stop="handleUnclaimTask"
+              variant="outline"
+              size="sm"
+            >
+              Unclaim
+            </Button>
+          </template>
+
+          <!-- In Progress Task -->
+          <template v-else-if="taskStatus === 'in-progress'">
+            <Button
+              @click.stop="handleCompleteTask"
+              variant="default"
+              size="sm"
+              class="gap-2"
+            >
+              <CheckCircle class="h-4 w-4" />
+              Mark Complete
+            </Button>
+            <Button
+              @click.stop="handleUnclaimTask"
+              variant="outline"
+              size="sm"
+            >
+              Unclaim
+            </Button>
+          </template>
+
+          <!-- Completed Task -->
+          <template v-else-if="taskStatus === 'completed'">
+            <Button
+              @click.stop="handleUnclaimTask"
+              variant="outline"
+              size="sm"
+            >
+              Unclaim
+            </Button>
+          </template>
         </div>
       </div>
     </CollapsibleContent>
@@ -232,14 +414,14 @@ function cancelMarkComplete() {
   <Dialog :open="showConfirmDialog" @update:open="(val: boolean) => showConfirmDialog = val">
     <DialogContent>
       <DialogHeader>
-        <DialogTitle>Mark Event as Complete?</DialogTitle>
+        <DialogTitle>{{ dialogContent.title }}</DialogTitle>
         <DialogDescription>
-          This will mark "{{ event.title }}" as completed by you. Other users will be able to see that you completed this event.
+          {{ dialogContent.description }}
         </DialogDescription>
       </DialogHeader>
       <DialogFooter>
-        <Button variant="outline" @click="cancelMarkComplete">Cancel</Button>
-        <Button @click="confirmMarkComplete">Mark Complete</Button>
+        <Button variant="outline" @click="cancelAction">Cancel</Button>
+        <Button @click="confirmAction">{{ dialogContent.confirmText }}</Button>
       </DialogFooter>
     </DialogContent>
   </Dialog>
diff --git a/src/modules/nostr-feed/composables/useScheduledEvents.ts b/src/modules/nostr-feed/composables/useScheduledEvents.ts
index e56c002..e8e8f42 100644
--- a/src/modules/nostr-feed/composables/useScheduledEvents.ts
+++ b/src/modules/nostr-feed/composables/useScheduledEvents.ts
@@ -1,6 +1,6 @@
 import { computed } from 'vue'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
-import type { ScheduledEventService, ScheduledEvent, EventCompletion } from '../services/ScheduledEventService'
+import type { ScheduledEventService, ScheduledEvent, EventCompletion, TaskStatus } from '../services/ScheduledEventService'
 import type { AuthService } from '@/modules/base/auth/auth-service'
 import { useToast } from '@/core/composables/useToast'
 
@@ -64,8 +64,78 @@ export function useScheduledEvents() {
     return scheduledEventService.isCompleted(eventAddress)
   }
 
+  /**
+   * Get task status for an event
+   */
+  const getTaskStatus = (eventAddress: string, occurrence?: string): TaskStatus | null => {
+    if (!scheduledEventService) return null
+    return scheduledEventService.getTaskStatus(eventAddress, occurrence)
+  }
+
+  /**
+   * Claim a task
+   */
+  const claimTask = async (event: ScheduledEvent, notes: string = '', occurrence?: string): Promise<void> => {
+    if (!scheduledEventService) {
+      toast.error('Scheduled event service not available')
+      return
+    }
+
+    try {
+      await scheduledEventService.claimTask(event, notes, occurrence)
+      toast.success('Task claimed!')
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to claim task'
+      if (message.includes('authenticated')) {
+        toast.error('Please sign in to claim tasks')
+      } else {
+        toast.error(message)
+      }
+      console.error('Failed to claim task:', error)
+    }
+  }
+
+  /**
+   * Start a task (mark as in-progress)
+   */
+  const startTask = async (event: ScheduledEvent, notes: string = '', occurrence?: string): Promise<void> => {
+    if (!scheduledEventService) {
+      toast.error('Scheduled event service not available')
+      return
+    }
+
+    try {
+      await scheduledEventService.startTask(event, notes, occurrence)
+      toast.success('Task started!')
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to start task'
+      toast.error(message)
+      console.error('Failed to start task:', error)
+    }
+  }
+
+  /**
+   * Unclaim a task (remove task status)
+   */
+  const unclaimTask = async (event: ScheduledEvent, occurrence?: string): Promise<void> => {
+    if (!scheduledEventService) {
+      toast.error('Scheduled event service not available')
+      return
+    }
+
+    try {
+      await scheduledEventService.unclaimTask(event, occurrence)
+      toast.success('Task unclaimed')
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to unclaim task'
+      toast.error(message)
+      console.error('Failed to unclaim task:', error)
+    }
+  }
+
   /**
    * Toggle completion status of an event (optionally for a specific occurrence)
+   * DEPRECATED: Use claimTask, startTask, completeEvent, or unclaimTask instead for more granular control
    */
   const toggleComplete = async (event: ScheduledEvent, occurrence?: string, notes: string = ''): Promise<void> => {
     console.log('🔧 useScheduledEvents: toggleComplete called for event:', event.title, 'occurrence:', occurrence)
@@ -82,19 +152,19 @@ export function useScheduledEvents() {
       console.log('📊 useScheduledEvents: Current completion status:', currentlyCompleted)
 
       if (currentlyCompleted) {
-        console.log('⬇️ useScheduledEvents: Marking as incomplete...')
-        await scheduledEventService.uncompleteEvent(event, occurrence)
-        toast.success('Event marked as incomplete')
+        console.log('⬇️ useScheduledEvents: Unclaiming task...')
+        await scheduledEventService.unclaimTask(event, occurrence)
+        toast.success('Task unclaimed')
       } else {
         console.log('⬆️ useScheduledEvents: Marking as complete...')
         await scheduledEventService.completeEvent(event, notes, occurrence)
-        toast.success('Event completed!')
+        toast.success('Task completed!')
       }
     } catch (error) {
       const message = error instanceof Error ? error.message : 'Failed to toggle completion'
 
       if (message.includes('authenticated')) {
-        toast.error('Please sign in to complete events')
+        toast.error('Please sign in to complete tasks')
       } else if (message.includes('Not connected')) {
         toast.error('Not connected to relays')
       } else {
@@ -108,19 +178,19 @@ export function useScheduledEvents() {
   /**
    * Complete an event with optional notes
    */
-  const completeEvent = async (event: ScheduledEvent, notes: string = ''): Promise<void> => {
+  const completeEvent = async (event: ScheduledEvent, occurrence?: string, notes: string = ''): Promise<void> => {
     if (!scheduledEventService) {
       toast.error('Scheduled event service not available')
       return
     }
 
     try {
-      await scheduledEventService.completeEvent(event, notes)
-      toast.success('Event completed!')
+      await scheduledEventService.completeEvent(event, notes, occurrence)
+      toast.success('Task completed!')
     } catch (error) {
-      const message = error instanceof Error ? error.message : 'Failed to complete event'
+      const message = error instanceof Error ? error.message : 'Failed to complete task'
       toast.error(message)
-      console.error('Failed to complete event:', error)
+      console.error('Failed to complete task:', error)
     }
   }
 
@@ -147,15 +217,21 @@ export function useScheduledEvents() {
   })
 
   return {
-    // Methods
+    // Methods - Getters
     getScheduledEvents,
     getEventsForDate,
     getEventsForSpecificDate,
     getTodaysEvents,
     getCompletion,
     isCompleted,
-    toggleComplete,
+    getTaskStatus,
+
+    // Methods - Actions
+    claimTask,
+    startTask,
     completeEvent,
+    unclaimTask,
+    toggleComplete, // DEPRECATED: Use specific actions instead
 
     // State
     isLoading,
diff --git a/src/modules/nostr-feed/services/ScheduledEventService.ts b/src/modules/nostr-feed/services/ScheduledEventService.ts
index 21af01f..7524b01 100644
--- a/src/modules/nostr-feed/services/ScheduledEventService.ts
+++ b/src/modules/nostr-feed/services/ScheduledEventService.ts
@@ -28,14 +28,16 @@ export interface ScheduledEvent {
   recurrence?: RecurrencePattern // Optional: for recurring events
 }
 
+export type TaskStatus = 'claimed' | 'in-progress' | 'completed' | 'blocked' | 'cancelled'
+
 export interface EventCompletion {
   id: string
   eventAddress: string // "31922:pubkey:d-tag"
   occurrence?: string // ISO date string for the specific occurrence (YYYY-MM-DD)
-  pubkey: string // Who completed it
+  pubkey: string // Who claimed/completed it
   created_at: number
-  completed: boolean
-  completedAt?: number
+  taskStatus: TaskStatus
+  completedAt?: number // Unix timestamp when completed
   notes: string
 }
 
@@ -158,7 +160,19 @@ export class ScheduledEventService extends BaseService {
         return
       }
 
-      const completed = event.tags.find(tag => tag[0] === 'completed')?.[1] === 'true'
+      // Parse task status (new approach)
+      const taskStatusTag = event.tags.find(tag => tag[0] === 'task-status')?.[1] as TaskStatus | undefined
+
+      // Backward compatibility: check old 'completed' tag if task-status not present
+      let taskStatus: TaskStatus
+      if (taskStatusTag) {
+        taskStatus = taskStatusTag
+      } else {
+        // Legacy support: convert old 'completed' tag to new taskStatus
+        const completed = event.tags.find(tag => tag[0] === 'completed')?.[1] === 'true'
+        taskStatus = completed ? 'completed' : 'claimed'
+      }
+
       const completedAtTag = event.tags.find(tag => tag[0] === 'completed_at')?.[1]
       const completedAt = completedAtTag ? parseInt(completedAtTag) : undefined
       const occurrence = event.tags.find(tag => tag[0] === 'occurrence')?.[1] // ISO date string
@@ -166,7 +180,7 @@ export class ScheduledEventService extends BaseService {
       console.log('📋 Completion details:', {
         aTag,
         occurrence,
-        completed,
+        taskStatus,
         pubkey: event.pubkey,
         eventId: event.id
       })
@@ -177,7 +191,7 @@ export class ScheduledEventService extends BaseService {
         occurrence,
         pubkey: event.pubkey,
         created_at: event.created_at,
-        completed,
+        taskStatus,
         completedAt,
         notes: event.content
       }
@@ -189,7 +203,7 @@ export class ScheduledEventService extends BaseService {
       const existing = this._completions.get(completionKey)
       if (!existing || event.created_at > existing.created_at) {
         this._completions.set(completionKey, completion)
-        console.log('✅ Stored completion for:', completionKey, '- completed:', completed)
+        console.log('✅ Stored completion for:', completionKey, '- status:', taskStatus)
       } else {
         console.log('⏭️ Skipped older completion for:', completionKey)
       }
@@ -310,15 +324,49 @@ export class ScheduledEventService extends BaseService {
    */
   isCompleted(eventAddress: string, occurrence?: string): boolean {
     const completion = this.getCompletion(eventAddress, occurrence)
-    return completion?.completed || false
+    return completion?.taskStatus === 'completed'
+  }
+
+  /**
+   * Get task status for an event
+   */
+  getTaskStatus(eventAddress: string, occurrence?: string): TaskStatus | null {
+    const completion = this.getCompletion(eventAddress, occurrence)
+    return completion?.taskStatus || null
+  }
+
+  /**
+   * Claim a task (mark as claimed)
+   */
+  async claimTask(event: ScheduledEvent, notes: string = '', occurrence?: string): Promise<void> {
+    await this.updateTaskStatus(event, 'claimed', notes, occurrence)
+  }
+
+  /**
+   * Start a task (mark as in-progress)
+   */
+  async startTask(event: ScheduledEvent, notes: string = '', occurrence?: string): Promise<void> {
+    await this.updateTaskStatus(event, 'in-progress', notes, occurrence)
   }
 
   /**
    * Mark an event as complete (optionally for a specific occurrence)
    */
   async completeEvent(event: ScheduledEvent, notes: string = '', occurrence?: string): Promise<void> {
+    await this.updateTaskStatus(event, 'completed', notes, occurrence)
+  }
+
+  /**
+   * Internal method to update task status
+   */
+  private async updateTaskStatus(
+    event: ScheduledEvent,
+    taskStatus: TaskStatus,
+    notes: string = '',
+    occurrence?: string
+  ): Promise<void> {
     if (!this.authService?.isAuthenticated?.value) {
-      throw new Error('Must be authenticated to complete events')
+      throw new Error('Must be authenticated to update task status')
     }
 
     if (!this.relayHub?.isConnected) {
@@ -335,14 +383,17 @@ export class ScheduledEventService extends BaseService {
 
       const eventAddress = `31922:${event.pubkey}:${event.dTag}`
 
-      // Create RSVP/completion event (NIP-52)
+      // Create RSVP event with task-status tag
       const tags: string[][] = [
         ['a', eventAddress],
-        ['status', 'accepted'],
-        ['completed', 'true'],
-        ['completed_at', Math.floor(Date.now() / 1000).toString()]
+        ['task-status', taskStatus]
       ]
 
+      // Add completed_at timestamp if task is completed
+      if (taskStatus === 'completed') {
+        tags.push(['completed_at', Math.floor(Date.now() / 1000).toString()])
+      }
+
       // Add occurrence tag if provided (for recurring events)
       if (occurrence) {
         tags.push(['occurrence', occurrence])
@@ -359,17 +410,17 @@ export class ScheduledEventService extends BaseService {
       const privkeyBytes = this.hexToUint8Array(userPrivkey)
       const signedEvent = finalizeEvent(eventTemplate, privkeyBytes)
 
-      // Publish the completion
-      console.log('📤 Publishing completion event (kind 31925) for:', eventAddress)
+      // Publish the status update
+      console.log(`📤 Publishing task status update (${taskStatus}) for:`, eventAddress)
       const result = await this.relayHub.publishEvent(signedEvent)
-      console.log('✅ Completion event published to', result.success, '/', result.total, 'relays')
+      console.log('✅ Task status published to', result.success, '/', result.total, 'relays')
 
       // Optimistically update local state
       console.log('🔄 Optimistically updating local state')
       this.handleCompletionEvent(signedEvent)
 
     } catch (error) {
-      console.error('Failed to complete event:', error)
+      console.error('Failed to update task status:', error)
       throw error
     } finally {
       this._isLoading.value = false
@@ -377,11 +428,13 @@ export class ScheduledEventService extends BaseService {
   }
 
   /**
-   * Uncomplete an event (publish new RSVP with completed=false)
+   * Unclaim/reset a task (removes task status - makes it unclaimed)
+   * Note: In Nostr, we can't truly "delete" an event, but we can publish
+   * a deletion request (kind 5) to ask relays to remove our RSVP
    */
-  async uncompleteEvent(event: ScheduledEvent, occurrence?: string): Promise<void> {
+  async unclaimTask(event: ScheduledEvent, occurrence?: string): Promise<void> {
     if (!this.authService?.isAuthenticated?.value) {
-      throw new Error('Must be authenticated to uncomplete events')
+      throw new Error('Must be authenticated to unclaim tasks')
     }
 
     if (!this.relayHub?.isConnected) {
@@ -397,38 +450,40 @@ export class ScheduledEventService extends BaseService {
       this._isLoading.value = true
 
       const eventAddress = `31922:${event.pubkey}:${event.dTag}`
+      const completionKey = occurrence ? `${eventAddress}:${occurrence}` : eventAddress
+      const completion = this._completions.get(completionKey)
 
-      // Create RSVP event with completed=false
-      const tags: string[][] = [
-        ['a', eventAddress],
-        ['status', 'tentative'],
-        ['completed', 'false']
-      ]
-
-      // Add occurrence tag if provided (for recurring events)
-      if (occurrence) {
-        tags.push(['occurrence', occurrence])
+      if (!completion) {
+        console.log('No completion to unclaim')
+        return
       }
 
-      const eventTemplate: EventTemplate = {
-        kind: 31925,
-        content: '',
-        tags,
+      // Create deletion event (kind 5) for the RSVP
+      const deletionEvent: EventTemplate = {
+        kind: 5,
+        content: 'Task unclaimed',
+        tags: [
+          ['e', completion.id], // Reference to the RSVP event being deleted
+          ['k', '31925'] // Kind of event being deleted
+        ],
         created_at: Math.floor(Date.now() / 1000)
       }
 
       // Sign the event
       const privkeyBytes = this.hexToUint8Array(userPrivkey)
-      const signedEvent = finalizeEvent(eventTemplate, privkeyBytes)
+      const signedEvent = finalizeEvent(deletionEvent, privkeyBytes)
 
-      // Publish the uncomplete
-      await this.relayHub.publishEvent(signedEvent)
+      // Publish the deletion request
+      console.log('📤 Publishing deletion request for task RSVP:', completion.id)
+      const result = await this.relayHub.publishEvent(signedEvent)
+      console.log('✅ Deletion request published to', result.success, '/', result.total, 'relays')
 
-      // Optimistically update local state
-      this.handleCompletionEvent(signedEvent)
+      // Optimistically remove from local state
+      this._completions.delete(completionKey)
+      console.log('🗑️ Removed completion from local state:', completionKey)
 
     } catch (error) {
-      console.error('Failed to uncomplete event:', error)
+      console.error('Failed to unclaim task:', error)
       throw error
     } finally {
       this._isLoading.value = false

From d8e67984b0f734955b64d7ee9b89cfcae79855b8 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 16 Nov 2025 17:01:22 +0100
Subject: [PATCH 26/32] Fix real-time unclaim updates for task workflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add deletion event handling to enable real-time UI updates when tasks are unclaimed. Previously, unclaiming a task required manual refresh to see the update.

Changes:
- Add handleDeletionEvent() to ScheduledEventService to process kind 5 deletion events
- Update FeedService to route kind 31925 deletions to ScheduledEventService
- Implement NIP-09 validation (only author can delete their own events)
- Remove completions from reactive Map to trigger Vue reactivity

Technical details:
- Subscription to kind 5 events was already in place
- Issue was lack of routing for kind 31925 (RSVP/completion) deletions
- Now follows same pattern as reaction and post deletions
- Deletion events properly update the _completions reactive Map
- UI automatically reflects unclaimed state through Vue reactivity

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../nostr-feed/services/FeedService.ts        | 11 +++++
 .../services/ScheduledEventService.ts         | 40 +++++++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/src/modules/nostr-feed/services/FeedService.ts b/src/modules/nostr-feed/services/FeedService.ts
index 500f963..d46ab24 100644
--- a/src/modules/nostr-feed/services/FeedService.ts
+++ b/src/modules/nostr-feed/services/FeedService.ts
@@ -383,6 +383,17 @@ export class FeedService extends BaseService {
       return
     }
 
+    // Route to ScheduledEventService for completion/RSVP deletions (kind 31925)
+    if (deletedKind === '31925') {
+      console.log('🔀 FeedService: Routing kind 5 (deletion of kind 31925) to ScheduledEventService')
+      if (this.scheduledEventService) {
+        this.scheduledEventService.handleDeletionEvent(event)
+      } else {
+        console.warn('⚠️ FeedService: ScheduledEventService not available')
+      }
+      return
+    }
+
     // Handle post deletions (kind 1) in FeedService
     if (deletedKind === '1' || !deletedKind) {
       // Extract event IDs to delete from 'e' tags
diff --git a/src/modules/nostr-feed/services/ScheduledEventService.ts b/src/modules/nostr-feed/services/ScheduledEventService.ts
index 7524b01..fc97fd1 100644
--- a/src/modules/nostr-feed/services/ScheduledEventService.ts
+++ b/src/modules/nostr-feed/services/ScheduledEventService.ts
@@ -213,6 +213,46 @@ export class ScheduledEventService extends BaseService {
     }
   }
 
+  /**
+   * Handle deletion event (kind 5) for completion events
+   * Made public so FeedService can route deletion events to this service
+   */
+  public handleDeletionEvent(event: NostrEvent): void {
+    console.log('🗑️ ScheduledEventService: Received deletion event (kind 5)', event.id)
+
+    try {
+      // Extract event IDs to delete from 'e' tags
+      const eventIdsToDelete = event.tags
+        ?.filter((tag: string[]) => tag[0] === 'e')
+        .map((tag: string[]) => tag[1]) || []
+
+      if (eventIdsToDelete.length === 0) {
+        console.warn('Deletion event missing e tags:', event.id)
+        return
+      }
+
+      console.log('🔍 Looking for completions to delete:', eventIdsToDelete)
+
+      // Find and remove completions that match the deleted event IDs
+      let deletedCount = 0
+      for (const [completionKey, completion] of this._completions.entries()) {
+        // Only delete if:
+        // 1. The completion event ID matches one being deleted
+        // 2. The deletion request comes from the same author (NIP-09 validation)
+        if (eventIdsToDelete.includes(completion.id) && completion.pubkey === event.pubkey) {
+          this._completions.delete(completionKey)
+          console.log('✅ Deleted completion:', completionKey, 'event ID:', completion.id)
+          deletedCount++
+        }
+      }
+
+      console.log(`🗑️ Deleted ${deletedCount} completion(s) from deletion event`)
+
+    } catch (error) {
+      console.error('Failed to handle deletion event:', error)
+    }
+  }
+
   /**
    * Get all scheduled events
    */

From 76fbf7579fea1b5716eaa860012e647cf9991a71 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 16 Nov 2025 17:10:34 +0100
Subject: [PATCH 27/32] Add jump ahead buttons for task workflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enable users to skip intermediate task states in the expanded view. Users can now directly mark tasks as in-progress or complete without going through all workflow steps.

Changes:
- Add "Mark In Progress" button for unclaimed tasks (skips claiming)
- Add "Mark Complete" button for unclaimed and claimed tasks (skips intermediate states)
- Maintain existing workflow buttons (Claim Task, Start Task, Unclaim)
- Use concise, industry-standard button labels following common task management UX

Button layout:
- Unclaimed: "Claim Task" (default), "Mark In Progress" (outline), "Mark Complete" (outline)
- Claimed: "Start Task" (default), "Mark Complete" (outline), "Unclaim" (outline)
- In Progress: "Mark Complete" (default), "Unclaim" (outline)
- Completed: "Unclaim" (outline)

This provides maximum flexibility for different task management workflows while maintaining clear visual hierarchy with primary/outline button variants.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/ScheduledEventCard.vue         | 52 ++++++++++++++-----
 1 file changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/modules/nostr-feed/components/ScheduledEventCard.vue b/src/modules/nostr-feed/components/ScheduledEventCard.vue
index d6e4ef1..15270fe 100644
--- a/src/modules/nostr-feed/components/ScheduledEventCard.vue
+++ b/src/modules/nostr-feed/components/ScheduledEventCard.vue
@@ -342,19 +342,38 @@ const dialogContent = computed(() => {
 
         <!-- Action Buttons (only for completable task events) -->
         <div v-if="isCompletable" class="mt-3 flex flex-wrap gap-2">
-          <!-- Unclaimed Task -->
-          <Button
-            v-if="!taskStatus"
-            @click.stop="handleClaimTask"
-            variant="outline"
-            size="sm"
-            class="gap-2"
-          >
-            <Hand class="h-4 w-4" />
-            Claim Task
-          </Button>
+          <!-- Unclaimed Task - Show all options including jump ahead -->
+          <template v-if="!taskStatus">
+            <Button
+              @click.stop="handleClaimTask"
+              variant="default"
+              size="sm"
+              class="gap-2"
+            >
+              <Hand class="h-4 w-4" />
+              Claim Task
+            </Button>
+            <Button
+              @click.stop="handleStartTask"
+              variant="outline"
+              size="sm"
+              class="gap-2"
+            >
+              <PlayCircle class="h-4 w-4" />
+              Mark In Progress
+            </Button>
+            <Button
+              @click.stop="handleCompleteTask"
+              variant="outline"
+              size="sm"
+              class="gap-2"
+            >
+              <CheckCircle class="h-4 w-4" />
+              Mark Complete
+            </Button>
+          </template>
 
-          <!-- Claimed Task -->
+          <!-- Claimed Task - Show start and option to skip directly to complete -->
           <template v-else-if="taskStatus === 'claimed'">
             <Button
               @click.stop="handleStartTask"
@@ -365,6 +384,15 @@ const dialogContent = computed(() => {
               <PlayCircle class="h-4 w-4" />
               Start Task
             </Button>
+            <Button
+              @click.stop="handleCompleteTask"
+              variant="outline"
+              size="sm"
+              class="gap-2"
+            >
+              <CheckCircle class="h-4 w-4" />
+              Mark Complete
+            </Button>
             <Button
               @click.stop="handleUnclaimTask"
               variant="outline"

From d0b3396af788eeb258af5bca5455e1c6515587ef Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 16 Nov 2025 20:54:25 +0100
Subject: [PATCH 28/32] Fix unclaim permission bug - only show button for task
 owner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously, users could see and click "Unclaim" button for tasks claimed by others, leading to failed deletion attempts and temporary UI inconsistencies.

Changes:
- Add auth service injection to ScheduledEventCard
- Add canUnclaim computed property checking if current user created the current status
- Only show "Unclaim" button when canUnclaim is true (user owns the current status)
- Applies NIP-09 rule: users can only delete their own events

Behavior:
- Alice claims task → only Alice sees "Unclaim" button
- Bob marks task in-progress → only Bob sees "Unclaim" button
- Prevents failed deletion attempts and optimistic update bugs
- Follows Nostr protocol permissions correctly

This is a quick fix. Future enhancement will track per-user status for full collaborative workflow support.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/ScheduledEventCard.vue           | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/modules/nostr-feed/components/ScheduledEventCard.vue b/src/modules/nostr-feed/components/ScheduledEventCard.vue
index 15270fe..51c8102 100644
--- a/src/modules/nostr-feed/components/ScheduledEventCard.vue
+++ b/src/modules/nostr-feed/components/ScheduledEventCard.vue
@@ -17,6 +17,8 @@ import {
 } from '@/components/ui/collapsible'
 import { Calendar, MapPin, Clock, CheckCircle, PlayCircle, Hand } from 'lucide-vue-next'
 import type { ScheduledEvent, EventCompletion, TaskStatus } from '../services/ScheduledEventService'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import type { AuthService } from '@/modules/base/auth/auth-service'
 
 interface Props {
   event: ScheduledEvent
@@ -39,6 +41,9 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
+// Get auth service to check current user
+const authService = injectService<AuthService>(SERVICE_TOKENS.AUTH_SERVICE)
+
 // Confirmation dialog state
 const showConfirmDialog = ref(false)
 
@@ -66,6 +71,15 @@ const isCompletable = computed(() => props.event.eventType === 'task')
 // Get completion data
 const completion = computed(() => props.getCompletion(eventAddress.value, occurrence.value))
 
+// Get current user's pubkey
+const currentUserPubkey = computed(() => authService?.user.value?.pubkey)
+
+// Check if current user can unclaim (only if they created the current status)
+const canUnclaim = computed(() => {
+  if (!completion.value || !currentUserPubkey.value) return false
+  return completion.value.pubkey === currentUserPubkey.value
+})
+
 // Status badges configuration
 const statusConfig = computed(() => {
   switch (taskStatus.value) {
@@ -394,6 +408,7 @@ const dialogContent = computed(() => {
               Mark Complete
             </Button>
             <Button
+              v-if="canUnclaim"
               @click.stop="handleUnclaimTask"
               variant="outline"
               size="sm"
@@ -414,6 +429,7 @@ const dialogContent = computed(() => {
               Mark Complete
             </Button>
             <Button
+              v-if="canUnclaim"
               @click.stop="handleUnclaimTask"
               variant="outline"
               size="sm"
@@ -425,6 +441,7 @@ const dialogContent = computed(() => {
           <!-- Completed Task -->
           <template v-else-if="taskStatus === 'completed'">
             <Button
+              v-if="canUnclaim"
               @click.stop="handleUnclaimTask"
               variant="outline"
               size="sm"

From 4e8548892181ca483e67865ae087f6aa8be3fb3b Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 16 Nov 2025 21:01:38 +0100
Subject: [PATCH 29/32] Simplify unclaim logic - only for claimed state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refine unclaim button visibility to prevent confusing UX where users could "unclaim" status updates they didn't claim.

Changes:
- Only show "Unclaim" button when task is in "claimed" state
- Remove "Unclaim" button from in-progress and completed states
- Maintain check that current user must be the claimer

Rationale:
- Prevents confusion where user marks task in-progress but sees "Unclaim"
- "Unclaim" makes sense only for the original claim action
- Users can still update status (mark in-progress/complete) on any task
- But only the claimer can unclaim the original claim

Example scenarios:
- Alice claims task → Alice sees "Unclaim" button
- Bob marks Alice's task as in-progress → Bob does NOT see "Unclaim"
- Only Alice can unclaim, reverting task to unclaimed state

This simple rule prevents UX confusion until we implement full per-user status tracking.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/modules/nostr-feed/components/ScheduledEventCard.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/modules/nostr-feed/components/ScheduledEventCard.vue b/src/modules/nostr-feed/components/ScheduledEventCard.vue
index 51c8102..3abb133 100644
--- a/src/modules/nostr-feed/components/ScheduledEventCard.vue
+++ b/src/modules/nostr-feed/components/ScheduledEventCard.vue
@@ -74,9 +74,11 @@ const completion = computed(() => props.getCompletion(eventAddress.value, occurr
 // Get current user's pubkey
 const currentUserPubkey = computed(() => authService?.user.value?.pubkey)
 
-// Check if current user can unclaim (only if they created the current status)
+// Check if current user can unclaim
+// Only show unclaim for "claimed" state, and only if current user is the one who claimed it
 const canUnclaim = computed(() => {
   if (!completion.value || !currentUserPubkey.value) return false
+  if (taskStatus.value !== 'claimed') return false
   return completion.value.pubkey === currentUserPubkey.value
 })
 

From 8f05f4ec7c975c310fe5bbc7b5c22b1d180e102a Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 16 Nov 2025 21:14:34 +0100
Subject: [PATCH 30/32] Add communication confirmation checkbox for unclaiming
 tasks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Require users to confirm they've communicated with the team before unclaiming a task to prevent coordination issues.

Changes:
- Add hasConfirmedCommunication checkbox state
- Show checkbox in unclaim confirmation dialog
- Disable "Unclaim Task" button until checkbox is checked
- Reset checkbox state when dialog is closed/cancelled
- Update dialog description to prompt communication

UX Flow:
1. User clicks "Unclaim" button
2. Dialog appears with message about removing claim
3. Checkbox: "I have communicated this to the team"
4. "Unclaim Task" button disabled until checkbox checked
5. Forces user acknowledgment before unclaiming

This prevents situations where:
- Someone unclaims without notifying others working on related tasks
- Team members are left confused about task status
- Work gets duplicated or blocked due to lack of communication

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/ScheduledEventCard.vue         | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/modules/nostr-feed/components/ScheduledEventCard.vue b/src/modules/nostr-feed/components/ScheduledEventCard.vue
index 3abb133..25d312a 100644
--- a/src/modules/nostr-feed/components/ScheduledEventCard.vue
+++ b/src/modules/nostr-feed/components/ScheduledEventCard.vue
@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
 import {
   Dialog,
   DialogContent,
@@ -46,6 +47,7 @@ const authService = injectService<AuthService>(SERVICE_TOKENS.AUTH_SERVICE)
 
 // Confirmation dialog state
 const showConfirmDialog = ref(false)
+const hasConfirmedCommunication = ref(false)
 
 // Event address for tracking completion
 const eventAddress = computed(() => `31922:${props.event.pubkey}:${props.event.dTag}`)
@@ -178,6 +180,11 @@ function handleUnclaimTask() {
 function confirmAction() {
   if (!pendingAction.value) return
 
+  // For unclaim action, require checkbox confirmation
+  if (pendingAction.value === 'unclaim' && !hasConfirmedCommunication.value) {
+    return
+  }
+
   switch (pendingAction.value) {
     case 'claim':
       emit('claim-task', props.event, occurrence.value)
@@ -195,12 +202,14 @@ function confirmAction() {
 
   showConfirmDialog.value = false
   pendingAction.value = null
+  hasConfirmedCommunication.value = false
 }
 
 // Cancel action
 function cancelAction() {
   showConfirmDialog.value = false
   pendingAction.value = null
+  hasConfirmedCommunication.value = false
 }
 
 // Get dialog content based on pending action
@@ -227,7 +236,7 @@ const dialogContent = computed(() => {
     case 'unclaim':
       return {
         title: 'Unclaim Task?',
-        description: `This will remove your claim on "${props.event.title}" and make it available for others.`,
+        description: `This will remove your claim on "${props.event.title}" and make it available for others.\n\nHave you communicated to others that you are unclaiming this task?`,
         confirmText: 'Unclaim Task'
       }
     default:
@@ -466,9 +475,30 @@ const dialogContent = computed(() => {
           {{ dialogContent.description }}
         </DialogDescription>
       </DialogHeader>
+
+      <!-- Communication confirmation checkbox (only for unclaim) -->
+      <div v-if="pendingAction === 'unclaim'" class="flex items-start space-x-3 py-4">
+        <Checkbox
+          :model-value="hasConfirmedCommunication"
+          @update:model-value="(val) => hasConfirmedCommunication = !!val"
+          id="confirm-communication"
+        />
+        <label
+          for="confirm-communication"
+          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+        >
+          I have communicated this to the team.
+        </label>
+      </div>
+
       <DialogFooter>
         <Button variant="outline" @click="cancelAction">Cancel</Button>
-        <Button @click="confirmAction">{{ dialogContent.confirmText }}</Button>
+        <Button
+          @click="confirmAction"
+          :disabled="pendingAction === 'unclaim' && !hasConfirmedCommunication"
+        >
+          {{ dialogContent.confirmText }}
+        </Button>
       </DialogFooter>
     </DialogContent>
   </Dialog>

From 3b8c82514ad34b5c9722e0e067534b0e360a5f21 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 16 Nov 2025 22:39:38 +0100
Subject: [PATCH 31/32] Add delete task functionality for task authors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added ability for task authors to delete their own tasks from the expanded
view in the task feed.

**Features:**
- Delete button visible only to task author in expanded task view
- Confirmation dialog with destructive styling
- Publishes NIP-09 deletion event (kind 5) with 'a' tag referencing the
  task's event address (kind:pubkey:d-tag format)
- Real-time deletion handling via FeedService routing
- Optimistic local state update for immediate UI feedback

**Implementation:**
- Added deleteTask() method to ScheduledEventService
- Added handleTaskDeletion() for processing incoming deletion events
- Updated FeedService to route kind 31922 deletions to ScheduledEventService
- Added delete button and dialog flow to ScheduledEventCard component
- Integrated with existing confirmation dialog pattern

**Permissions:**
- Only task authors can delete tasks (enforced by isAuthor check)
- NIP-09 validation: relays only accept deletion from event author
- Pubkey verification in handleTaskDeletion()

**Testing:**
- Created tasks and verified delete button appears for author only
- Confirmed deletion removes task from UI immediately
- Verified deletion persists after refresh
- Tested with multiple users - others cannot delete

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../nostr-feed/components/NostrFeed.vue       |  11 ++
 .../components/ScheduledEventCard.vue         |  39 ++++++-
 .../composables/useScheduledEvents.ts         |  20 ++++
 .../nostr-feed/services/FeedService.ts        |  11 ++
 .../services/ScheduledEventService.ts         | 106 ++++++++++++++++++
 5 files changed, 185 insertions(+), 2 deletions(-)

diff --git a/src/modules/nostr-feed/components/NostrFeed.vue b/src/modules/nostr-feed/components/NostrFeed.vue
index b3dfc22..529b7d7 100644
--- a/src/modules/nostr-feed/components/NostrFeed.vue
+++ b/src/modules/nostr-feed/components/NostrFeed.vue
@@ -107,6 +107,7 @@ const {
   startTask,
   completeEvent,
   unclaimTask,
+  deleteTask,
   allCompletions
 } = useScheduledEvents()
 
@@ -301,6 +302,15 @@ async function onUnclaimTask(event: ScheduledEvent, occurrence?: string) {
   }
 }
 
+async function onDeleteTask(event: ScheduledEvent) {
+  console.log('🗑️ NostrFeed: Deleting task:', event.title)
+  try {
+    await deleteTask(event)
+  } catch (error) {
+    console.error('❌ Failed to delete task:', error)
+  }
+}
+
 // Handle collapse toggle with cascading behavior
 function onToggleCollapse(postId: string) {
   const newCollapsed = new Set(collapsedPosts.value)
@@ -555,6 +565,7 @@ function cancelDelete() {
               @start-task="onStartTask"
               @complete-task="onCompleteTask"
               @unclaim-task="onUnclaimTask"
+              @delete-task="onDeleteTask"
             />
           </div>
           <div v-else class="text-center py-3 text-muted-foreground text-sm px-4">
diff --git a/src/modules/nostr-feed/components/ScheduledEventCard.vue b/src/modules/nostr-feed/components/ScheduledEventCard.vue
index 25d312a..46c188e 100644
--- a/src/modules/nostr-feed/components/ScheduledEventCard.vue
+++ b/src/modules/nostr-feed/components/ScheduledEventCard.vue
@@ -16,7 +16,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@/components/ui/collapsible'
-import { Calendar, MapPin, Clock, CheckCircle, PlayCircle, Hand } from 'lucide-vue-next'
+import { Calendar, MapPin, Clock, CheckCircle, PlayCircle, Hand, Trash2 } from 'lucide-vue-next'
 import type { ScheduledEvent, EventCompletion, TaskStatus } from '../services/ScheduledEventService'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import type { AuthService } from '@/modules/base/auth/auth-service'
@@ -34,6 +34,7 @@ interface Emits {
   (e: 'start-task', event: ScheduledEvent, occurrence?: string): void
   (e: 'complete-task', event: ScheduledEvent, occurrence?: string): void
   (e: 'unclaim-task', event: ScheduledEvent, occurrence?: string): void
+  (e: 'delete-task', event: ScheduledEvent): void
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -84,6 +85,12 @@ const canUnclaim = computed(() => {
   return completion.value.pubkey === currentUserPubkey.value
 })
 
+// Check if current user is the author of the task
+const isAuthor = computed(() => {
+  if (!currentUserPubkey.value) return false
+  return props.event.pubkey === currentUserPubkey.value
+})
+
 // Status badges configuration
 const statusConfig = computed(() => {
   switch (taskStatus.value) {
@@ -150,7 +157,7 @@ const formattedTimeRange = computed(() => {
 })
 
 // Action type for confirmation dialog
-const pendingAction = ref<'claim' | 'start' | 'complete' | 'unclaim' | null>(null)
+const pendingAction = ref<'claim' | 'start' | 'complete' | 'unclaim' | 'delete' | null>(null)
 
 // Handle claim task
 function handleClaimTask() {
@@ -176,6 +183,12 @@ function handleUnclaimTask() {
   showConfirmDialog.value = true
 }
 
+// Handle delete task
+function handleDeleteTask() {
+  pendingAction.value = 'delete'
+  showConfirmDialog.value = true
+}
+
 // Confirm action
 function confirmAction() {
   if (!pendingAction.value) return
@@ -198,6 +211,9 @@ function confirmAction() {
     case 'unclaim':
       emit('unclaim-task', props.event, occurrence.value)
       break
+    case 'delete':
+      emit('delete-task', props.event)
+      break
   }
 
   showConfirmDialog.value = false
@@ -239,6 +255,12 @@ const dialogContent = computed(() => {
         description: `This will remove your claim on "${props.event.title}" and make it available for others.\n\nHave you communicated to others that you are unclaiming this task?`,
         confirmText: 'Unclaim Task'
       }
+    case 'delete':
+      return {
+        title: 'Delete Task?',
+        description: `This will permanently delete "${props.event.title}". This action cannot be undone.`,
+        confirmText: 'Delete Task'
+      }
     default:
       return {
         title: '',
@@ -461,6 +483,19 @@ const dialogContent = computed(() => {
             </Button>
           </template>
         </div>
+
+        <!-- Delete Task Button (only for task author) -->
+        <div v-if="isAuthor" class="mt-4 pt-4 border-t border-border">
+          <Button
+            @click.stop="handleDeleteTask"
+            variant="destructive"
+            size="sm"
+            class="gap-2"
+          >
+            <Trash2 class="h-4 w-4" />
+            Delete Task
+          </Button>
+        </div>
       </div>
     </CollapsibleContent>
 
diff --git a/src/modules/nostr-feed/composables/useScheduledEvents.ts b/src/modules/nostr-feed/composables/useScheduledEvents.ts
index e8e8f42..580a26b 100644
--- a/src/modules/nostr-feed/composables/useScheduledEvents.ts
+++ b/src/modules/nostr-feed/composables/useScheduledEvents.ts
@@ -208,6 +208,25 @@ export function useScheduledEvents() {
     return scheduledEventService?.scheduledEvents ?? new Map()
   })
 
+  /**
+   * Delete a task (only author can delete)
+   */
+  const deleteTask = async (event: ScheduledEvent): Promise<void> => {
+    if (!scheduledEventService) {
+      toast.error('Scheduled event service not available')
+      return
+    }
+
+    try {
+      await scheduledEventService.deleteTask(event)
+      toast.success('Task deleted!')
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to delete task'
+      toast.error(message)
+      console.error('Failed to delete task:', error)
+    }
+  }
+
   /**
    * Get all completions (reactive) - returns array for better reactivity
    */
@@ -231,6 +250,7 @@ export function useScheduledEvents() {
     startTask,
     completeEvent,
     unclaimTask,
+    deleteTask,
     toggleComplete, // DEPRECATED: Use specific actions instead
 
     // State
diff --git a/src/modules/nostr-feed/services/FeedService.ts b/src/modules/nostr-feed/services/FeedService.ts
index d46ab24..2141ed7 100644
--- a/src/modules/nostr-feed/services/FeedService.ts
+++ b/src/modules/nostr-feed/services/FeedService.ts
@@ -394,6 +394,17 @@ export class FeedService extends BaseService {
       return
     }
 
+    // Route to ScheduledEventService for scheduled event deletions (kind 31922)
+    if (deletedKind === '31922') {
+      console.log('🔀 FeedService: Routing kind 5 (deletion of kind 31922) to ScheduledEventService')
+      if (this.scheduledEventService) {
+        this.scheduledEventService.handleTaskDeletion(event)
+      } else {
+        console.warn('⚠️ FeedService: ScheduledEventService not available')
+      }
+      return
+    }
+
     // Handle post deletions (kind 1) in FeedService
     if (deletedKind === '1' || !deletedKind) {
       // Extract event IDs to delete from 'e' tags
diff --git a/src/modules/nostr-feed/services/ScheduledEventService.ts b/src/modules/nostr-feed/services/ScheduledEventService.ts
index fc97fd1..4911b24 100644
--- a/src/modules/nostr-feed/services/ScheduledEventService.ts
+++ b/src/modules/nostr-feed/services/ScheduledEventService.ts
@@ -253,6 +253,50 @@ export class ScheduledEventService extends BaseService {
     }
   }
 
+  /**
+   * Handle deletion event (kind 5) for scheduled events (kind 31922)
+   * Made public so FeedService can route deletion events to this service
+   */
+  public handleTaskDeletion(event: NostrEvent): void {
+    console.log('🗑️ ScheduledEventService: Received task deletion event (kind 5)', event.id)
+
+    try {
+      // Extract event addresses to delete from 'a' tags
+      const eventAddressesToDelete = event.tags
+        ?.filter((tag: string[]) => tag[0] === 'a')
+        .map((tag: string[]) => tag[1]) || []
+
+      if (eventAddressesToDelete.length === 0) {
+        console.warn('Task deletion event missing a tags:', event.id)
+        return
+      }
+
+      console.log('🔍 Looking for tasks to delete:', eventAddressesToDelete)
+
+      // Find and remove tasks that match the deleted event addresses
+      let deletedCount = 0
+      for (const eventAddress of eventAddressesToDelete) {
+        const task = this._scheduledEvents.get(eventAddress)
+
+        // Only delete if:
+        // 1. The task exists
+        // 2. The deletion request comes from the task author (NIP-09 validation)
+        if (task && task.pubkey === event.pubkey) {
+          this._scheduledEvents.delete(eventAddress)
+          console.log('✅ Deleted task:', eventAddress)
+          deletedCount++
+        } else if (task) {
+          console.warn('⚠️ Deletion request not from task author:', eventAddress)
+        }
+      }
+
+      console.log(`🗑️ Deleted ${deletedCount} task(s) from deletion event`)
+
+    } catch (error) {
+      console.error('Failed to handle task deletion event:', error)
+    }
+  }
+
   /**
    * Get all scheduled events
    */
@@ -530,6 +574,68 @@ export class ScheduledEventService extends BaseService {
     }
   }
 
+  /**
+   * Delete a scheduled event (kind 31922)
+   * Only the author can delete their own event
+   */
+  async deleteTask(event: ScheduledEvent): Promise<void> {
+    if (!this.authService?.isAuthenticated?.value) {
+      throw new Error('Must be authenticated to delete tasks')
+    }
+
+    if (!this.relayHub?.isConnected) {
+      throw new Error('Not connected to relays')
+    }
+
+    const userPrivkey = this.authService.user.value?.prvkey
+    const userPubkey = this.authService.user.value?.pubkey
+
+    if (!userPrivkey || !userPubkey) {
+      throw new Error('User credentials not available')
+    }
+
+    // Only author can delete
+    if (userPubkey !== event.pubkey) {
+      throw new Error('Only the task author can delete this task')
+    }
+
+    try {
+      this._isLoading.value = true
+
+      const eventAddress = `31922:${event.pubkey}:${event.dTag}`
+
+      // Create deletion event (kind 5) for the scheduled event
+      const deletionEvent: EventTemplate = {
+        kind: 5,
+        content: 'Task deleted',
+        tags: [
+          ['a', eventAddress], // Reference to the parameterized replaceable event being deleted
+          ['k', '31922'] // Kind of event being deleted
+        ],
+        created_at: Math.floor(Date.now() / 1000)
+      }
+
+      // Sign the event
+      const privkeyBytes = this.hexToUint8Array(userPrivkey)
+      const signedEvent = finalizeEvent(deletionEvent, privkeyBytes)
+
+      // Publish the deletion request
+      console.log('📤 Publishing deletion request for task:', eventAddress)
+      const result = await this.relayHub.publishEvent(signedEvent)
+      console.log('✅ Task deletion request published to', result.success, '/', result.total, 'relays')
+
+      // Optimistically remove from local state
+      this._scheduledEvents.delete(eventAddress)
+      console.log('🗑️ Removed task from local state:', eventAddress)
+
+    } catch (error) {
+      console.error('Failed to delete task:', error)
+      throw error
+    } finally {
+      this._isLoading.value = false
+    }
+  }
+
   /**
    * Helper function to convert hex string to Uint8Array
    */

From 078c55b8e9f4033452345865732ca793ebfe0d70 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Tue, 18 Nov 2025 20:35:59 +0100
Subject: [PATCH 32/32] Fix critical bug: prevent optimistic UI updates when
 event publish fails
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Problem:**
Task status changes (claim/start/complete/unclaim/delete) would update the
local UI state even when the Nostr event failed to publish to ANY relays.
This caused users to see "completed" tasks that were never actually published,
leading to confusion when the UI reverted after page refresh.

**Root Cause:**
ScheduledEventService optimistically updated local state after calling
publishEvent(), without checking if any relays accepted the event. If all
relay publishes failed (result.success = 0), the UI still updated.

**Solution:**
Modified RelayHub.publishEvent() to throw an error when no relays accept the
event (success = 0). This ensures:
- Existing try-catch blocks handle the error properly
- Error toast shown to user: "Failed to publish event - none of X relay(s) accepted it"
- Local state NOT updated (UI remains accurate)
- Consistent behavior across all services using publishEvent()

**Changes:**
- relay-hub.ts: Add check after publish - throw error if successful === 0
- ScheduledEventService.ts: Update comments to reflect new behavior

**Benefits:**
- Single source of truth for publish failure handling
- No code duplication (no need to check result.success everywhere)
- Better UX: Users immediately see error instead of false success
- UI state always matches server state after operations

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/modules/base/nostr/relay-hub.ts                      | 6 +++++-
 src/modules/nostr-feed/services/ScheduledEventService.ts | 8 ++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/modules/base/nostr/relay-hub.ts b/src/modules/base/nostr/relay-hub.ts
index 486d3f2..7cdd00f 100644
--- a/src/modules/base/nostr/relay-hub.ts
+++ b/src/modules/base/nostr/relay-hub.ts
@@ -540,9 +540,13 @@ export class RelayHub extends BaseService {
     const successful = results.filter(result => result.status === 'fulfilled').length
     const total = results.length
 
-
     this.emit('eventPublished', { eventId: event.id, success: successful, total })
 
+    // Throw error if no relays accepted the event
+    if (successful === 0) {
+      throw new Error(`Failed to publish event - none of the ${total} relay(s) accepted it`)
+    }
+
     return { success: successful, total }
   }
 
diff --git a/src/modules/nostr-feed/services/ScheduledEventService.ts b/src/modules/nostr-feed/services/ScheduledEventService.ts
index 4911b24..d2ef6b4 100644
--- a/src/modules/nostr-feed/services/ScheduledEventService.ts
+++ b/src/modules/nostr-feed/services/ScheduledEventService.ts
@@ -499,8 +499,8 @@ export class ScheduledEventService extends BaseService {
       const result = await this.relayHub.publishEvent(signedEvent)
       console.log('✅ Task status published to', result.success, '/', result.total, 'relays')
 
-      // Optimistically update local state
-      console.log('🔄 Optimistically updating local state')
+      // Update local state (publishEvent throws if no relays accepted)
+      console.log('🔄 Updating local state (event published successfully)')
       this.handleCompletionEvent(signedEvent)
 
     } catch (error) {
@@ -562,7 +562,7 @@ export class ScheduledEventService extends BaseService {
       const result = await this.relayHub.publishEvent(signedEvent)
       console.log('✅ Deletion request published to', result.success, '/', result.total, 'relays')
 
-      // Optimistically remove from local state
+      // Remove from local state (publishEvent throws if no relays accepted)
       this._completions.delete(completionKey)
       console.log('🗑️ Removed completion from local state:', completionKey)
 
@@ -624,7 +624,7 @@ export class ScheduledEventService extends BaseService {
       const result = await this.relayHub.publishEvent(signedEvent)
       console.log('✅ Task deletion request published to', result.success, '/', result.total, 'relays')
 
-      // Optimistically remove from local state
+      // Remove from local state (publishEvent throws if no relays accepted)
       this._scheduledEvents.delete(eventAddress)
       console.log('🗑️ Removed task from local state:', eventAddress)