From 2ebc9af7982d927860fdc6d6ed80085649d424ca Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Tue, 11 Nov 2025 02:44:16 +0100
Subject: [PATCH] Add UI indicators for virtual parent accounts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updates permission grant dialogs to visually distinguish virtual accounts:

Changes:
- Add custom option template to account selectors (both grant and bulk grant dialogs)
- Show "🌐 Virtual parent" caption explaining inheritance behavior
- Add blue "Virtual" chip badge to virtual accounts in dropdown
- Update hint text: "virtual accounts cascade to all children"
- Include is_virtual flag in accountOptions computed property

User Experience:
When admin selects account in grant dialog, virtual accounts now clearly show:
- "Expenses" with "Virtual" badge
- Caption: "grants access to all Expenses:* accounts"

This helps admins understand that granting permission on "Expenses" will
automatically give users access to all real expense accounts:
- Expenses:Groceries
- Expenses:Gas:Kitchen
- Expenses:Maintenance:Property
- etc.

Related: migrations.py m003 (created virtual parent accounts)

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 static/js/permissions.js          |  3 ++-
 templates/castle/permissions.html | 30 ++++++++++++++++++++++++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/static/js/permissions.js b/static/js/permissions.js
index b2af372..1f5905a 100644
--- a/static/js/permissions.js
+++ b/static/js/permissions.js
@@ -67,7 +67,8 @@ window.app = Vue.createApp({
     accountOptions() {
       return this.accounts.map(acc => ({
         id: acc.id,
-        name: acc.name
+        name: acc.name,
+        is_virtual: acc.is_virtual || false
       }))
     },
 
diff --git a/templates/castle/permissions.html b/templates/castle/permissions.html
index 91fa6f2..f38017d 100644
--- a/templates/castle/permissions.html
+++ b/templates/castle/permissions.html
@@ -303,7 +303,7 @@
       <q-select
         v-model="grantForm.account_id"
         label="Account *"
-        hint="Account to grant access to"
+        hint="Account to grant access to (virtual accounts cascade to all children)"
         :options="accountOptions"
         option-value="id"
         option-label="name"
@@ -316,6 +316,19 @@
         <template v-slot:prepend>
           <q-icon name="account_balance"></q-icon>
         </template>
+        <template v-slot:option="scope">
+          <q-item v-bind="scope.itemProps">
+            <q-item-section>
+              <q-item-label>{% raw %}{{ scope.opt.name }}{% endraw %}</q-item-label>
+              <q-item-label v-if="scope.opt.is_virtual" caption class="text-blue-7">
+                🌐 Virtual parent (grants access to all {% raw %}{{ scope.opt.name }}{% endraw %}:* accounts)
+              </q-item-label>
+            </q-item-section>
+            <q-item-section v-if="scope.opt.is_virtual" side>
+              <q-chip size="sm" color="blue" text-color="white">Virtual</q-chip>
+            </q-item-section>
+          </q-item>
+        </template>
       </q-select>
 
       <!-- Permission Type -->
@@ -437,7 +450,7 @@
       <q-select
         v-model="bulkGrantForm.account_id"
         label="Account *"
-        hint="Account to grant access to"
+        hint="Account to grant access to (virtual accounts cascade to all children)"
         :options="accountOptions"
         option-value="id"
         option-label="name"
@@ -450,6 +463,19 @@
         <template v-slot:prepend>
           <q-icon name="account_balance"></q-icon>
         </template>
+        <template v-slot:option="scope">
+          <q-item v-bind="scope.itemProps">
+            <q-item-section>
+              <q-item-label>{% raw %}{{ scope.opt.name }}{% endraw %}</q-item-label>
+              <q-item-label v-if="scope.opt.is_virtual" caption class="text-blue-7">
+                🌐 Virtual parent (grants access to all {% raw %}{{ scope.opt.name }}{% endraw %}:* accounts)
+              </q-item-label>
+            </q-item-section>
+            <q-item-section v-if="scope.opt.is_virtual" side>
+              <q-chip size="sm" color="blue" text-color="white">Virtual</q-chip>
+            </q-item-section>
+          </q-item>
+        </template>
       </q-select>
 
       <!-- Permission Type -->