rule book dup/delete

docs/mammon-api.yml

@@ -10,174 +10,200 @@ paths:
     get:
       tags:
       - rule-book
+      summary: Find a rule book by its id
       operationId: findRuleBookById
       parameters:
       - name: ruleBookId
         in: path
+        description: Id of the rule book
         required: true
         schema:
           type: string
           format: uuid
       responses:
-        "404":
-          description: Not Found
-        "400":
-          description: Bad Request
         "200":
-          description: OK
+          description: The rule book
           content:
             '*/*':
               schema:
                 $ref: "#/components/schemas/RuleBookResponse"
+        "404":
+          description: No rule book with this id
     put:
       tags:
       - rule-book
+      summary: Update a rule book
       operationId: updateRuleBook
       parameters:
       - name: ruleBookId
         in: path
+        description: Id of the rule book
         required: true
         schema:
           type: string
           format: uuid
       requestBody:
+        description: New state of the rule book
         content:
           application/json:
             schema:
               $ref: "#/components/schemas/UpdateRuleBookRequest"
         required: true
       responses:
-        "404":
-          description: Not Found
-        "400":
-          description: Bad Request
         "200":
-          description: OK
+          description: The updated rule book
           content:
             '*/*':
               schema:
                 $ref: "#/components/schemas/RuleBookResponse"
+        "400":
+          description: Invalid request (e.g. blank name)
+    delete:
+      tags:
+      - rule-book
+      summary: Delete a rule book
+      operationId: deleteRuleBook
+      parameters:
+      - name: ruleBookId
+        in: path
+        description: Id of the rule book
+        required: true
+        schema:
+          type: string
+          format: uuid
+      responses:
+        "204":
+          description: The rule book was deleted
+        "400":
+          description: The rule book is associated to a character
   /ledgers/main/{ledgerId}:
     put:
       tags:
       - ledger
+      summary: Update a main ledger
       operationId: updateMainLedger
       parameters:
       - name: ledgerId
         in: path
+        description: Id of the main ledger
         required: true
         schema:
           type: string
           format: uuid
       requestBody:
+        description: New state of the main ledger
         content:
           application/json:
             schema:
               $ref: "#/components/schemas/UpdateMainLedgerRequest"
         required: true
       responses:
-        "404":
-          description: Not Found
-        "400":
-          description: Bad Request
         "200":
-          description: OK
+          description: The updated main ledger
           content:
             '*/*':
               schema:
                 $ref: "#/components/schemas/MainLedgerResponse"
+        "400":
+          description: "The ledger is not a main ledger, or the request is invalid"
+        "404":
+          description: No ledger with this id
   /ledgers/combined/{ledgerId}:
     put:
       tags:
       - ledger
+      summary: Update a combined ledger
       operationId: updateCombinedLedger
       parameters:
       - name: ledgerId
         in: path
+        description: Id of the combined ledger
         required: true
         schema:
           type: string
           format: uuid
       requestBody:
+        description: New state of the combined ledger
         content:
           application/json:
             schema:
               $ref: "#/components/schemas/UpdateCombinedLedgerRequest"
         required: true
       responses:
-        "404":
-          description: Not Found
-        "400":
-          description: Bad Request
         "200":
-          description: OK
+          description: The updated combined ledger
           content:
             '*/*':
               schema:
                 $ref: "#/components/schemas/CombinedLedgerResponse"
+        "400":
+          description: "The ledger is not a combined ledger, or the request is invalid"
+        "404":
+          description: No ledger with this id
   /characters/{characterId}/rule-book:
     get:
       tags:
       - character-rule-book
+      summary: Find the rule book assigned to a character
       operationId: findCharacterRuleBookByCharacterId
       parameters:
       - name: characterId
         in: path
+        description: Id of the character
         required: true
         schema:
           type: integer
           format: int64
       responses:
-        "404":
-          description: Not Found
-        "400":
-          description: Bad Request
         "200":
-          description: OK
+          description: The rule book assignment of the character
           content:
             '*/*':
               schema:
                 $ref: "#/components/schemas/CharacterRuleBookResponse"
+        "400":
+          description: Invalid character id
+        "404":
+          description: No rule book assigned to this character
     put:
       tags:
       - character-rule-book
+      summary: Assign a rule book to a character
       operationId: setCharacterRuleBookForCharacter
       parameters:
       - name: characterId
         in: path
+        description: Id of the character
         required: true
         schema:
           type: integer
           format: int64
       requestBody:
+        description: Rule book and ledger bindings to assign
         content:
           application/json:
             schema:
               $ref: "#/components/schemas/SetCharacterRuleBookRequest"
         required: true
       responses:
-        "404":
-          description: Not Found
-        "400":
-          description: Bad Request
         "200":
-          description: OK
+          description: The rule book assignment of the character
           content:
             '*/*':
               schema:
                 $ref: "#/components/schemas/CharacterRuleBookResponse"
+        "400":
+          description: "The referenced rule book or a bound ledger does not exist,\
+            \ or a ledger binding is missing"
   /rule-books:
     get:
       tags:
       - rule-book
+      summary: Find all rule books
       operationId: findAllRuleBooks
       responses:
-        "404":
-          description: Not Found
-        "400":
-          description: Bad Request
         "200":
-          description: OK
+          description: All rule books
           content:
             '*/*':
               schema:
@@ -187,234 +213,258 @@ paths:
     post:
       tags:
       - rule-book
+      summary: Create a rule book
       operationId: createRuleBook
       requestBody:
+        description: Rule book to create
         content:
           application/json:
             schema:
               $ref: "#/components/schemas/CreateRuleBookRequest"
         required: true
       responses:
-        "404":
-          description: Not Found
-        "400":
-          description: Bad Request
-        "200":
-          description: OK
+        "201":
+          description: The created rule book
           content:
             '*/*':
               schema:
                 $ref: "#/components/schemas/RuleBookResponse"
+        "400":
+          description: Invalid request (e.g. blank name)
   /process-activities:
     post:
       tags:
       - processing
+      summary: Process new activities for all characters with a usable token
       operationId: processNewActivities
       responses:
-        "404":
-          description: Not Found
-        "400":
-          description: Bad Request
         "200":
-          description: OK
+          description: New activities processed
   /ledgers/main:
     post:
       tags:
       - ledger
+      summary: Create a main ledger
       operationId: createMainLedger
       requestBody:
+        description: Main ledger to create
         content:
           application/json:
             schema:
               $ref: "#/components/schemas/CreateMainLedgerRequest"
         required: true
       responses:
-        "404":
-          description: Not Found
-        "400":
-          description: Bad Request
-        "200":
-          description: OK
+        "201":
+          description: The created main ledger
           content:
             '*/*':
               schema:
                 $ref: "#/components/schemas/MainLedgerResponse"
+        "400":
+          description: Invalid request (e.g. blank name)
   /ledgers/combined:
     post:
       tags:
       - ledger
+      summary: Create a combined ledger
       operationId: createCombinedLedger
       requestBody:
+        description: Combined ledger to create
         content:
           application/json:
             schema:
               $ref: "#/components/schemas/CreateCombinedLedgerRequest"
         required: true
       responses:
-        "404":
-          description: Not Found
-        "400":
-          description: Bad Request
-        "200":
-          description: OK
+        "201":
+          description: The created combined ledger
           content:
             '*/*':
               schema:
                 $ref: "#/components/schemas/CombinedLedgerResponse"
+        "400":
+          description: "Invalid request (e.g. blank name, a member ledger missing\
+            \ or already contained)"
+  /activity/fetch:
+    post:
+      tags:
+      - activity
+      summary: Fetch all new activities for all characters from the EVE API
+      operationId: fetchAllNewActivities
+      responses:
+        "200":
+          description: New activities fetched and stored
   /activity/fetch/{characterId}:
     post:
       tags:
       - activity
+      summary: Fetch new activities for a character from the EVE API
       operationId: fetchNewActivitiesForCharacter
       parameters:
       - name: characterId
         in: path
+        description: Id of the character
         required: true
         schema:
           type: integer
           format: int64
       responses:
-        "404":
-          description: Not Found
-        "400":
-          description: Bad Request
         "200":
-          description: OK
+          description: New activities fetched and stored
+        "400":
+          description: No character with this id
+  /rule-books/script-definitions:
+    get:
+      tags:
+      - rule-book
+      summary: Download the TypeScript definitions for the rule script runtime
+      operationId: getScriptDefinitions
+      responses:
+        "200":
+          description: The rule-runner.d.ts type definitions
+          content:
+            text/plain:
+              schema:
+                type: string
   /ledgers:
     get:
       tags:
       - ledger
+      summary: Find all ledgers
       operationId: findAllLedgers
       responses:
-        "404":
-          description: Not Found
-        "400":
-          description: Bad Request
         "200":
-          description: OK
+          description: All ledgers
           content:
             '*/*':
               schema:
                 type: array
                 items:
-                  oneOf:
-                  - $ref: "#/components/schemas/CombinedLedgerResponse"
-                  - $ref: "#/components/schemas/MainLedgerResponse"
+                  $ref: "#/components/schemas/LedgerResponse"
   /ledgers/{ledgerId}:
     get:
       tags:
       - ledger
+      summary: Find a ledger by its id
       operationId: findLedgerById
       parameters:
       - name: ledgerId
         in: path
+        description: Id of the ledger
         required: true
         schema:
           type: string
           format: uuid
       responses:
-        "404":
-          description: Not Found
-        "400":
-          description: Bad Request
         "200":
-          description: OK
+          description: The ledger
           content:
             '*/*':
               schema:
-                oneOf:
-                - $ref: "#/components/schemas/CombinedLedgerResponse"
-                - $ref: "#/components/schemas/MainLedgerResponse"
+                $ref: "#/components/schemas/LedgerResponse"
+        "400":
+          description: The ledger cannot be exposed (system ledger)
+        "404":
+          description: No ledger with this id
   /ledgers/{ledgerId}/transactions:
     get:
       tags:
       - transaction
+      summary: Find all transactions in a ledger
       operationId: finAllTransactionsInLedger
       parameters:
       - name: ledgerId
         in: path
+        description: Id of the ledger
         required: true
         schema:
           type: string
           format: uuid
       responses:
-        "404":
-          description: Not Found
-        "400":
-          description: Bad Request
         "200":
-          description: OK
+          description: All transactions in the ledger
           content:
             '*/*':
               schema:
                 type: array
                 items:
                   $ref: "#/components/schemas/TransactionResponse"
+        "404":
+          description: No ledger with this id
+  /ledgers/{ledgerId}/balance:
+    get:
+      tags:
+      - ledger
+      summary: Find the balance of a ledger
+      operationId: findBalanceByLedgerId
+      parameters:
+      - name: ledgerId
+        in: path
+        description: Id of the ledger
+        required: true
+        schema:
+          type: string
+          format: uuid
+      responses:
+        "200":
+          description: The balance of the ledger
+          content:
+            '*/*':
+              schema:
+                $ref: "#/components/schemas/BalanceResponse"
+        "404":
+          description: No ledger with this id
   /characters:
     get:
       tags:
       - character
+      summary: Find all characters with a usable token
       operationId: findAllCharacters
       responses:
-        "404":
-          description: Not Found
-        "400":
-          description: Bad Request
         "200":
-          description: OK
+          description: All characters with a usable token
           content:
             '*/*':
               schema:
                 type: array
                 items:
                   $ref: "#/components/schemas/CharacterResponse"
+  /acquisitions:
+    get:
+      tags:
+      - acquisition
+      summary: Find all acquisitions that still have remaining stock
+      operationId: findAllAcquisitions
+      responses:
+        "200":
+          description: The acquisitions with remaining stock
+          content:
+            '*/*':
+              schema:
+                type: array
+                items:
+                  $ref: "#/components/schemas/AcquisitionResponse"
 components:
   schemas:
-    RuleClauseResponse:
-      type: object
-      properties:
-        rate:
-          type: string
-          enum:
-          - NONE
-          - VALUE
-          - JITA_BUY
-          - JITA_SELL
-          - EVE_ESTIMATE
-        fromLedgerRef:
-          type: string
-        toLedgerRef:
-          type: string
-      required:
-      - fromLedgerRef
-      - rate
-      - toLedgerRef
-    RuleResponse:
-      type: object
-      properties:
-        clauses:
-          type: array
-          items:
-            $ref: "#/components/schemas/RuleClauseResponse"
-      required:
-      - clauses
     UpdateRuleBookRequest:
       type: object
       properties:
         name:
           type: string
+        usedForAcquisitions:
+          type: boolean
         ledgerRefs:
           type: array
           items:
             type: string
-        rules:
-          type: object
-          additionalProperties:
-            $ref: "#/components/schemas/RuleResponse"
+            pattern: "[a-z][a-zA-Z0-9]*"
+        script:
+          type: string
       required:
       - ledgerRefs
       - name
-      - rules
+      - script
+      - usedForAcquisitions
     RuleBookResponse:
       type: object
       properties:
@@ -423,19 +473,21 @@ components:
           format: uuid
         name:
           type: string
+        usedForAcquisitions:
+          type: boolean
         ledgerRefs:
           type: array
           items:
             type: string
-        rules:
-          type: object
-          additionalProperties:
-            $ref: "#/components/schemas/RuleResponse"
+            pattern: "[a-z][a-zA-Z0-9]*"
+        script:
+          type: string
       required:
       - ledgerRefs
       - name
       - ruleBookId
-      - rules
+      - script
+      - usedForAcquisitions
     UpdateMainLedgerRequest:
       type: object
       properties:
@@ -455,10 +507,6 @@ components:
             type: string
           balance:
             type: number
-          type:
-            type: string
-            enum:
-            - MAIN
       required:
       - balance
       - ledgerId
@@ -493,10 +541,6 @@ components:
             items:
               type: string
               format: uuid
-          type:
-            type: string
-            enum:
-            - COMBINED
       required:
       - balance
       - ledgerId
@@ -539,18 +583,20 @@ components:
       properties:
         name:
           type: string
+        usedForAcquisitions:
+          type: boolean
         ledgerRefs:
           type: array
           items:
             type: string
-        rules:
-          type: object
-          additionalProperties:
-            $ref: "#/components/schemas/RuleResponse"
+            pattern: "[a-z][a-zA-Z0-9]*"
+        script:
+          type: string
       required:
       - ledgerRefs
       - name
-      - rules
+      - script
+      - usedForAcquisitions
     CreateMainLedgerRequest:
       type: object
       properties:
@@ -572,15 +618,19 @@ components:
       - memberLedgerIds
       - name
     LedgerResponse:
-      type: object
       discriminator:
         propertyName: type
+        mapping:
+          MAIN: "#/components/schemas/MainLedgerResponse"
+          COMBINED: "#/components/schemas/CombinedLedgerResponse"
+      oneOf:
+      - $ref: "#/components/schemas/MainLedgerResponse"
+      - $ref: "#/components/schemas/CombinedLedgerResponse"
       properties:
         type:
           type: string
-          enum:
-          - MAIN
-          - COMBINED
+      required:
+      - type
     IskTransferResponse:
       allOf:
       - $ref: "#/components/schemas/TransferResponse"
@@ -594,10 +644,6 @@ components:
             format: uuid
           amount:
             type: number
-          type:
-            type: string
-            enum:
-            - ISK
       required:
       - amount
       - fromLedgerId
@@ -619,10 +665,6 @@ components:
           quantity:
             type: integer
             format: int64
-          type:
-            type: string
-            enum:
-            - ITEM
       required:
       - fromLedgerId
       - marketTypeId
@@ -634,6 +676,9 @@ components:
         transactionId:
           type: string
           format: uuid
+        characterId:
+          type: integer
+          format: int64
         datetime:
           type: string
           format: date-time
@@ -642,24 +687,51 @@ components:
         transfers:
           type: array
           items:
-            oneOf:
-            - $ref: "#/components/schemas/IskTransferResponse"
-            - $ref: "#/components/schemas/ItemTransferResponse"
+            $ref: "#/components/schemas/TransferResponse"
       required:
+      - characterId
       - datetime
       - description
       - transactionId
       - transfers
     TransferResponse:
-      type: object
       discriminator:
         propertyName: type
+        mapping:
+          ISK: "#/components/schemas/IskTransferResponse"
+          ITEM: "#/components/schemas/ItemTransferResponse"
+      oneOf:
+      - $ref: "#/components/schemas/IskTransferResponse"
+      - $ref: "#/components/schemas/ItemTransferResponse"
       properties:
         type:
           type: string
-          enum:
-          - ISK
-          - ITEM
+      required:
+      - type
+    BalanceResponse:
+      type: object
+      properties:
+        iskBalance:
+          type: number
+        itemBalances:
+          type: array
+          items:
+            $ref: "#/components/schemas/ItemBalanceResponse"
+      required:
+      - iskBalance
+      - itemBalances
+    ItemBalanceResponse:
+      type: object
+      properties:
+        typeId:
+          type: integer
+          format: int64
+        quantity:
+          type: integer
+          format: int64
+      required:
+      - quantity
+      - typeId
     CharacterResponse:
       type: object
       properties:
@@ -671,3 +743,40 @@ components:
       required:
       - characterId
       - name
+    AcquisitionResponse:
+      type: object
+      properties:
+        acquisitionId:
+          type: string
+          format: uuid
+        characterId:
+          type: integer
+          format: int64
+        marketTypeId:
+          type: integer
+          format: int64
+        source:
+          type: string
+          enum:
+          - BOUGHT
+          - MANUAL
+        datetime:
+          type: string
+          format: date-time
+        quantity:
+          type: integer
+          format: int64
+        remaining:
+          type: integer
+          format: int64
+        unitCost:
+          type: number
+      required:
+      - acquisitionId
+      - characterId
+      - datetime
+      - marketTypeId
+      - quantity
+      - remaining
+      - source
+      - unitCost

package.json

@@ -14,11 +14,13 @@
     "@vueuse/components": "^14.3.0",
     "@vueuse/core": "^14.3.0",
     "@vueuse/integrations": "^14.3.0",
+    "@vueuse/router": "^14.3.0",
     "axios": "^1.4.0",
     "axios-rate-limit": "^1.3.1",
     "gemory": "file:",
     "loglevel": "^1.8.1",
     "loglevel-plugin-prefix": "^0.8.4",
+    "monaco-editor": "^0.55.1",
     "pinia": "^3.0.4",
     "sortablejs": "^1.15.7",
     "vue": "^3.3.4",

src/App.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { RouterView, useRoute } from 'vue-router';
-import { Sidebar } from './sidebar';
-import { routeNames } from '@/routes';
+import {computed} from 'vue';
+import {RouterView, useRoute} from 'vue-router';
+import {Sidebar} from './sidebar';
+import {ConfirmModal} from '@/confirm';
+import {routeNames} from '@/routes';
 
 const route = useRoute();
 
@@ -21,10 +22,11 @@ const hideSidebar = computed(() => {
             <RouterView />
         </div>
     </template>
+    <ConfirmModal />
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 div.main-container {
     @apply px-4 sm:ml-64;

src/components/Dropdown.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import {ChevronDownIcon, ChevronUpIcon} from '@heroicons/vue/24/outline';
 import {vOnClickOutside} from '@vueuse/components';
-import {useEventListener} from '@vueuse/core';
-import {ref} from 'vue';
+import {useElementBounding, useEventListener} from '@vueuse/core';
+import {computed, ref} from 'vue';
 
 interface Props {
   inline?: boolean;
@@ -15,6 +15,16 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const isOpen = ref(false);
+const root = ref<HTMLElement | null>(null);
+const floating = ref<HTMLElement | null>(null);
+
+const { left, bottom, width } = useElementBounding(root);
+
+const floatingStyle = computed(() => ({
+  left: `${left.value}px`,
+  top: `${bottom.value}px`,
+  minWidth: `${width.value}px`,
+}));
 
 const doAutoClose = () => {
   if (props.autoClose) {
@@ -30,8 +40,8 @@ useEventListener('keyup', e => {
 </script>
 
 <template>
-    <div class="dropdown" :class="{'dropdown-open': isOpen, 'dropdown-close': !isOpen}" v-on-click-outside="doAutoClose">
-        <button @click="isOpen = !isOpen">
+    <div ref="root" class="dropdown" :class="{'dropdown-open': isOpen, 'dropdown-close': !isOpen}" v-on-click-outside="[doAutoClose, { ignore: [floating] }]">
+        <button @click="isOpen = !isOpen" class="cursor-pointer">
             <Transition
                 enter-active-class="transition-transform"
                 enter-from-class="rotate-180"
@@ -51,19 +61,36 @@ useEventListener('keyup', e => {
             <div v-if="inline && isOpen">
               <slot />
             </div>
-            <div v-else-if="isOpen" class="relative">
-                <div class="z-10 divide-y rounded-b-md absolute">
-                    <slot />
-                </div>
-            </div>
         </Transition>
+      
+        <Teleport to="body">
+          <Transition
+              enter-active-class="transition-opacity"
+              enter-from-class="opacity-0"
+              leave-from-class="transition-opacity"
+              leave-to-class="opacity-0">
+            <div v-if="!inline && isOpen" ref="floating" class="dropdown-floating" :style="floatingStyle">
+              <div class="divide-y rounded-b-md">
+                <slot />
+              </div>
+            </div>
+          </Transition>
+        </Teleport>
     </div>
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 .chevron {
     @apply w-4 h-4 me-1;
 }
+
+.dropdown-floating {
+    @apply fixed z-10;
+}
+
+.dropdown-floating > div {
+    @apply bg-slate-800 rounded-b-md shadow-lg;
+}
 </style>

src/components/Modal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { vOnClickOutside } from '@vueuse/components';
-import { useEventListener } from '@vueuse/core';
-import { watch } from 'vue';
+import {vOnClickOutside} from '@vueuse/components';
+import {useEventListener} from '@vueuse/core';
+import {watch} from 'vue';
 
 const open = defineModel('open', { default: false });
 
@@ -35,7 +35,7 @@ useEventListener('keyup', e => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 .fade-enter-from, .fade-leave-to {
     @apply opacity-0;
 }

src/components/SelectInput.vue

@@ -64,7 +64,7 @@ const submit = () => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 .fake-input {
     @apply flex border bg-slate-500 rounded px-1 py-0.5;
 }

src/components/SliderCheckbox.vue

@@ -11,8 +11,9 @@ const modelValue = defineModel({ default: false });
 </template>
 
 <style scoped>
-@reference "tailwindcss";
-    input:checked ~ span:last-child {
-        --tw-translate-x: 1.25rem;
-    }
+@reference "@/style.css";
+
+input:checked ~ span:last-child {
+  transform: translateX(1.25rem);
+}
 </style>

src/components/table/SortableHeader.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { HeaderComponent, SortDirection } from './sort';
+import {HeaderComponent, SortDirection} from './sort';
 
 interface Props {
     currentSortKey: string | null;
@@ -33,7 +33,7 @@ const emit = defineEmits<Emit>();
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 .sort-header {
     @apply relative h-8 pe-3;
 }

src/components/table/VirtualScrollTable.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useElementBounding, useVirtualList } from '@vueuse/core';
-import { computed, ref } from 'vue';
+import {useElementBounding, useVirtualList} from '@vueuse/core';
+import {computed, ref} from 'vue';
 
 interface Props {
     list?: any[];
@@ -68,29 +68,31 @@ const itemHeightStyle = computed(() => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
+
 div.table-container {
-    @apply bg-slate-600;
-    max-height: calc(100vh - v-bind(ypx));
-    :deep(>div) {
-        @apply bg-slate-800;
-        >table {
-            >thead {
-                @apply sticky z-10;
-                top: -1px;
-            }
-            >tfoot {
-                @apply bg-slate-600 sticky z-10;
-                bottom: -1px;
-            }
-            >*>tr, >*>tr>td {
-                height: v-bind(itemHeightStyle);
-            }
+  @apply bg-slate-600;
+  max-height: calc(100vh - v-bind(ypx));
+
+  &::-webkit-scrollbar-track {
+    margin-top: v-bind(computedHeaderHeight);
+    margin-bottom: v-bind(computedFooterHeight);
+  }
+}
+div.table-container:deep(>div) {
+    @apply bg-slate-800;
+    >table {
+        >thead {
+            @apply sticky z-10;
+            top: -1px;
+        }
+        >tfoot {
+            @apply bg-slate-600 sticky z-10;
+            bottom: -1px;
+        }
+        >*>tr, >*>tr>td {
+            height: v-bind(itemHeightStyle);
         }
-    }
-    &::-webkit-scrollbar-track {
-        margin-top: v-bind(computedHeaderHeight);
-        margin-bottom: v-bind(computedFooterHeight);
     }
 }
 </style>

src/components/tooltip/Tooltip.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { vElementHover } from '@vueuse/components';
-import { useElementBounding } from '@vueuse/core';
-import { computed, ref } from 'vue';
-import { useSharedWindowSize } from './tooltip';
+import {vElementHover} from '@vueuse/components';
+import {useElementBounding} from '@vueuse/core';
+import {computed, ref} from 'vue';
+import {useSharedWindowSize} from './tooltip';
 
 const open = defineModel('open', { default: false });
 
@@ -25,7 +25,7 @@ const positions = computed(() => {
 </script>
 
 <template>
-    <div ref="mainDiv" clas="flex flex-col items-center justify-center" :class="{
+    <div ref="mainDiv" class="flex flex-col items-center justify-center" :class="{
         'open': open,
         'tooltip-top': positions.includes('top'),
         'tooltip-bottom': positions.includes('bottom'),

src/confirm/ConfirmModal.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import {computed} from "vue";
+import {storeToRefs} from "pinia";
+import {Modal} from "@/components";
+import {useConfirmStore} from "./useConfirm";
+
+const confirmStore = useConfirmStore();
+const {open, options} = storeToRefs(confirmStore);
+const {accept, cancel} = confirmStore;
+
+const modalOpen = computed({
+  get: () => open.value,
+  set: value => {
+    if (!value) {
+      cancel();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal v-model:open="modalOpen">
+    <div class="bg-slate-800 rounded pb-4 w-96">
+      <span class="m-2">{{ options.title ?? "Confirm" }}</span>
+      <hr />
+      <div class="m-4">{{ options.message }}</div>
+      <div class="flex justify-end">
+        <button class="me-2" @click="cancel">{{ options.cancelLabel ?? "Cancel" }}</button>
+        <button class="confirm me-4" :class="options.danger ? 'danger' : ''" @click="accept">{{ options.confirmLabel ?? "Confirm" }}</button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+@reference "@/style.css";
+
+button.confirm {
+  @apply border-emerald-500 bg-emerald-500 hover:bg-emerald-600;
+
+  &.danger {
+    @apply border-amber-900 bg-amber-900 hover:bg-amber-800;
+  }
+}
+</style>

src/confirm/index.ts

@@ -0,0 +1,3 @@
+export { default as ConfirmModal } from './ConfirmModal.vue';
+export { confirm, useConfirmStore } from './useConfirm';
+export type { ConfirmOptions } from './useConfirm';

src/confirm/useConfirm.ts

@@ -0,0 +1,37 @@
+import {defineStore} from "pinia";
+import {ref} from "vue";
+
+export interface ConfirmOptions {
+    title?: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    danger?: boolean;
+}
+
+export const useConfirmStore = defineStore('confirm', () => {
+    const open = ref(false);
+    const options = ref<ConfirmOptions>({message: ""});
+    let resolver: ((value: boolean) => void) | undefined;
+
+    const settle = (value: boolean) => {
+        open.value = false;
+        resolver?.(value);
+        resolver = undefined;
+    };
+
+    const confirm = (opts: ConfirmOptions | string): Promise<boolean> => {
+        options.value = typeof opts === "string" ? {message: opts} : opts;
+        open.value = true;
+        return new Promise<boolean>(resolve => {
+            resolver = resolve;
+        });
+    };
+
+    const accept = () => settle(true);
+    const cancel = () => settle(false);
+
+    return {open, options, confirm, accept, cancel};
+});
+
+export const confirm = (opts: ConfirmOptions | string): Promise<boolean> => useConfirmStore().confirm(opts);

src/ledger/EditLedgerModal.vue

@@ -25,7 +25,7 @@ const name = ref("");
 const members = ref<Ledger[]>([]);
 const selectedLedger = ref<Ledger>();
 const availableLedgers = computed(() => ledgers.value
-    .filter((ledger) => selectedLedger.value === ledger)
+    .filter(l => l.ledgerId !== props.ledgerId)
     .filter(l => !members.value.includes(l)));
 
 
@@ -98,7 +98,7 @@ defineExpose({ open });
       <span class="m-2">{{ title }}</span>
       <hr />
       <div class="mt-4">
-        <div class="flex justify-center">
+        <div v-if="!ledgerId" class="flex justify-center">
           <div class="flex bg-slate-600 rounded-s-md p-1">
             <button class="switch" :class="{active: type === LedgerTypes.Main}" @click="type = LedgerTypes.Main">Main</button>
           </div>
@@ -136,7 +136,7 @@ defineExpose({ open });
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 button.switch {
   @apply flex items-center px-4 rounded-md bg-slate-600;

src/ledger/LedgerLabel.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 
-import {isCombined, Ledger} from "@/ledger/ledger.ts";
+import {isCombined, Ledger, systemLedger} from "@/ledger/ledger.ts";
 import {FolderOpenIcon} from '@heroicons/vue/24/outline';
 import {RouterLink} from "vue-router";
-import {routeNames} from "@/routes.ts";
+import {routeNames} from "@/routes";
 
 interface Props {
   ledger: Ledger;
@@ -17,7 +17,15 @@ const props = defineProps<Props>();
   <div class="flex">
     <FolderOpenIcon v-if="isCombined(ledger)" class="w-4 me-1" />
     <div v-else class="w-4 me-1"/>
-    <RouterLink v-if="link" :to="{name: routeNames.listLedgerTransactions, params: {ledgerId: ledger.ledgerId}}">{{ ledger.name }}</RouterLink>
-    <span v-else>{{ ledger.name }}</span>
+    <RouterLink v-if="link" :to="{name: routeNames.viewLedger, params: {ledgerId: ledger.ledgerId}}">{{ ledger.name }}</RouterLink>
+    <span v-else :class="{'system-ledger': ledger === systemLedger}">{{ ledger.name }}</span>
   </div>
 </template>
+
+<style scoped>
+@reference "@/style.css";
+
+.system-ledger {
+  @apply text-emerald-400;
+}
+</style>

src/ledger/LedgerSelect.vue

@@ -26,7 +26,7 @@ const ledgerId = computed({
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 .system-ledger {
   @apply text-emerald-400;

src/ledger/ledger.ts

@@ -1,33 +1,33 @@
 import {
+    BalanceResponse,
     CombinedLedgerResponse,
-    CombinedLedgerResponseTypeEnum,
     CreateCombinedLedgerRequest,
     CreateMainLedgerRequest,
-    LedgerResponseTypeEnum,
+    LedgerResponse,
     MainLedgerResponse,
-    MainLedgerResponseTypeEnum,
     TransactionResponse,
-    TransferResponseTypeEnum,
     UpdateCombinedLedgerRequest,
     UpdateMainLedgerRequest
 } from "@/generated/mammon";
 import {defineStore} from "pinia";
-import {ref, triggerRef} from "vue";
+import {computed, ref, triggerRef} from "vue";
 import {ledgerApi, transactionApi} from "@/mammon";
+import {useRouteParams} from "@vueuse/router";
 
-export const LedgerTypes = LedgerResponseTypeEnum;
+export const LedgerTypes = {
+    Main: 'MAIN',
+    Combined: 'COMBINED',
+};
 
-export type LedgerType = LedgerResponseTypeEnum;
-export type MainLedger = MainLedgerResponse & {type: MainLedgerResponseTypeEnum}
-export type CombinedLedger = CombinedLedgerResponse & {type: CombinedLedgerResponseTypeEnum}
+export type LedgerType = LedgerResponse['type'];
+export type MainLedger = MainLedgerResponse
+export type CombinedLedger = CombinedLedgerResponse
 export type Ledger = MainLedger | CombinedLedger;
 
-export const TransferTypes = TransferResponseTypeEnum;
-
 export const systemLedgerRef = 'system';
 export const systemLedger = {
     type: LedgerTypes.Main,
-    ledgerId: "",
+    ledgerId: "00000000-0000-0000-0000-000000000001",
     name: "Eve Economy",
     balance: 0,
     _system: true
@@ -74,5 +74,15 @@ export const useLedgersStore = defineStore('ledgers', () => {
     return {ledgers, findById, findAllById, createMain, createCombined, updateMain, updateCombined, refresh};
 })
 
-export const findAllTransactionInLeger = (ledger: Ledger | string): Promise<TransactionResponse[]> => transactionApi.finAllTransactionsInLedger(typeof ledger == 'string' ? ledger : ledger.ledgerId).then(response => response.data)
+const getLedgerId = (ledger: Ledger | string): string => typeof ledger == 'string' ? ledger : ledger.ledgerId;
 
+export const findAllTransactionInLeger = (ledger: Ledger | string): Promise<TransactionResponse[]> => transactionApi.finAllTransactionsInLedger(getLedgerId(ledger)).then(response => response.data)
+export const getLedgerBalance = (ledger: Ledger | string): Promise<BalanceResponse> => ledgerApi.findBalanceByLedgerId(getLedgerId(ledger)).then(response => response.data)
+
+export const useLedgerParam = () => {
+    const {findById} = useLedgersStore();
+    const ledgerId = useRouteParams<string, string>('ledgerId', '', { transform: v => typeof v === 'string' ? v : v[0]});
+    const ledger = computed(() => findById(ledgerId.value))
+
+    return {ledgerId, ledger};
+}

src/mammon/mammonService.ts

@@ -1,6 +1,7 @@
 import {logResource} from "@/service";
 import axios from "axios";
 import {
+    AcquisitionApi,
     ActivityApi,
     CharacterApi,
     CharacterRuleBookApi,
@@ -29,3 +30,4 @@ export const ruleBookApi = new RuleBookApi(undefined, mammonUrl, mammonAxiosInst
 export const characterRuleBookApi = new CharacterRuleBookApi(undefined, mammonUrl, mammonAxiosInstance);
 export const activityApi = new ActivityApi(undefined, mammonUrl, mammonAxiosInstance);
 export const processingApi = new ProcessingApi(undefined, mammonUrl, mammonAxiosInstance);
+export const acquisitionApi = new AcquisitionApi(undefined, mammonUrl, mammonAxiosInstance);

src/market/IskLabel.vue

@@ -1,13 +1,25 @@
 <script setup lang="ts">
 import {formatIsk} from "@/formaters";
+import {computed} from "vue";
 
 interface Props {
   amount: number;
+  colored?: boolean;
 }
 
-const { amount } = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  colored: true,
+});
+
+const computedClass = computed(() => {
+  if (!props.colored) {
+    return "";
+  }
+
+  return props.amount >= 0 ? 'text-emerald-400' : 'text-amber-700';
+})
 </script>
 
 <template>
-  <span :class="amount >= 0 ? 'text-emerald-400' : 'text-amber-700'">{{ formatIsk(amount) }}</span>
+  <span :class="computedClass">{{ formatIsk(amount) }}</span>
 </template>

src/market/acquisition/AcquiredType.ts

@@ -1,7 +1,7 @@
 import { MarketType } from "..";
-import { MarbasAcquiredType } from "./acquisition";
+import { RawAcquiredType } from "./acquisition";
 
-export type AcquiredType = Omit<MarbasAcquiredType, 'type'> & {
+export type AcquiredType = Omit<RawAcquiredType, 'type'> & {
     type: MarketType,
     buy: number,
     sell: number

src/market/acquisition/AcquisitionQuantilsTooltip.vue

@@ -75,7 +75,7 @@ watchEffect(async () => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 .tooltip {
     @apply ms-auto;

src/market/acquisition/AcquisitionResultTable.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { SortableHeader, useSort, VirtualScrollTable } from '@/components/table';
-import { formatEveDate, formatIsk, percentFormater } from '@/formaters';
-import { MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
-import { MinusIcon, PlusIcon } from '@heroicons/vue/24/outline';
-import { useStorage } from '@vueuse/core';
-import { computed, ref } from 'vue';
-import { AcquiredType } from './AcquiredType';
+import {SortableHeader, useSort, VirtualScrollTable} from '@/components/table';
+import {MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore} from "@/market";
+import {MinusIcon, PlusIcon} from '@heroicons/vue/24/outline';
+import {useStorage} from '@vueuse/core';
+import {computed, ref} from 'vue';
+import {AcquiredType} from './AcquiredType';
 import AcquisitionQuantilsTooltip from './AcquisitionQuantilsTooltip.vue';
+import {formatEveDate, formatIsk, percentFormater} from "@/formaters.ts";
 
 type Result = {
-    id: number;
+    id: string;
     type: MarketType;
     name: string;
     buy: number;
@@ -98,7 +98,7 @@ const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() =>
         const precentProfit = marketTaxStore.calculateProfit(price, first.sell);
 
         list.push({
-            id: typeID,
+            id: typeID.toString(),
             type: first.type,
             name: first.type.name,
             buy: first.buy,
@@ -246,7 +246,7 @@ const total = computed(() => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 div.end {
     @apply justify-self-end ms-2;
 }

src/market/acquisition/acquisition.ts

@@ -1,41 +1,43 @@
-import { defineStore } from "pinia";
-import { computed, ref } from "vue";
+import {defineStore} from "pinia";
+import {computed, ref} from "vue";
+import {acquisitionApi} from "@/mammon";
+import {AcquisitionResponse, AcquisitionResponseSourceEnum} from "@/generated/mammon";
 
 export type AcquiredTypeSource = 'bo' | 'so' | 'prod' | 'misc';
 
+export type RawAcquiredType = {
+    id: string;
+    type: number;
+    quantity: number;
+    remaining: number;
+    price: number;
+    date: Date;
+    source: AcquisitionResponseSourceEnum;
+}
+
+const toAcquiredType = (a: AcquisitionResponse): RawAcquiredType => ({
+    id: a.acquisitionId,
+    type: a.marketTypeId,
+    quantity: a.quantity,
+    remaining: a.remaining,
+    price: a.unitCost,
+    date: new Date(a.datetime),
+    source: a.source,
+});
+
 export const useAcquiredTypesStore = defineStore('market-acquisition', () => {
-    const acquiredTypes = ref<any[]>([]); // TODO
+    const acquiredTypes = ref<RawAcquiredType[]>([]);
 
     const types = computed(() => acquiredTypes.value.filter(item => item.remaining > 0));
-    const addAcquiredType = async (type: number, quantity: number, price: number, source?: AcquiredTypeSource) => { 
-        const newItem = [];
 
-        acquiredTypes.value = [...acquiredTypes.value, newItem];
-    };
-    const removeAcquiredType = async (id: number, quantity: number) => {
-        const found = acquiredTypes.value.find(t => t.id === id);
+    // Display-only: the backend exposes no write endpoint yet, so buy/sell are no-ops.
+    const addAcquiredType = async (_type: number, _quantity: number, _price: number, _source?: AcquiredTypeSource) => {};
+    const removeAcquiredType = async (_id: string, _quantity: number) => {};
 
-        if (!found) {
-            return 0;
-        }
-
-        const item = {
-            ...found,
-            remaining: Math.max(0, found.remaining - quantity)
-        };
-
-        acquiredTypes.value = acquiredTypes.value.map(i => {
-            if (i.id === item.id) {
-                return item;
-            } else {
-                return i;
-            }
-        });
-    };
-
-    const refresh = () => {}
+    const refresh = () => acquisitionApi.findAllAcquisitions()
+        .then(response => acquiredTypes.value = response.data.map(toAcquiredType));
 
     refresh();
 
     return { acquiredTypes: types, addAcquiredType, removeAcquiredType, refresh };
-});
+});

src/market/tax/TaxInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { storeToRefs } from "pinia";
-import { useMarketTaxStore } from "./tax";
+import {storeToRefs} from "pinia";
+import {useMarketTaxStore} from "./tax";
 
 const { brokerFee, scc } = storeToRefs(useMarketTaxStore());
 
@@ -18,7 +18,7 @@ const { brokerFee, scc } = storeToRefs(useMarketTaxStore());
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 div.end {
     @apply justify-self-end ms-2;
 }

src/market/tracking/TrackingResultTable.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { SliderCheckbox } from '@/components';
-import { SortableHeader, useSort, VirtualScrollTable } from '@/components/table';
-import { formatIsk, percentFormater } from '@/formaters';
-import { getHistoryQuartils, MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
-import { BookmarkSlashIcon, ShoppingCartIcon } from '@heroicons/vue/24/outline';
-import { useStorage } from '@vueuse/core';
-import { computed, ref } from 'vue';
-import { useAcquiredTypesStore } from '../acquisition';
-import { TrackingResult } from './tracking';
+import {SliderCheckbox} from '@/components';
+import {SortableHeader, useSort, VirtualScrollTable} from '@/components/table';
+import {getHistoryQuartils, MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore} from "@/market";
+import {BookmarkSlashIcon, ShoppingCartIcon} from '@heroicons/vue/24/outline';
+import {useStorage} from '@vueuse/core';
+import {computed, ref} from 'vue';
+import {useAcquiredTypesStore} from '../acquisition';
+import {TrackingResult} from './tracking';
 
 type Result = {
     type: MarketType;
@@ -168,7 +167,7 @@ const getLineColor = (result: Result) => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 div.end {
     @apply justify-self-end ms-2;
 }

src/market/type/MarketType.ts

@@ -1,7 +1,7 @@
 import {esiAxiosInstance} from '@/service';
 
 export type MarketType = {
-    type_id: number;
+    id: number;
     group_id: number;
     market_group_id: number;
     name: string;
@@ -19,9 +19,11 @@ const fetchType = (id: number): Promise<MarketType> => {
     if (cache.has(id)) {
         return Promise.resolve(cache.get(id)!);
     }
-    return esiAxiosInstance.get<MarketType>(`/universe/types/${id}/`).then(r => {
-        cache.set(id, r.data);
-        return r.data;
+    return esiAxiosInstance.get<Omit<MarketType, 'id'> & { type_id: number }>(`/universe/types/${id}/`).then(r => {
+        const { type_id, ...rest } = r.data;
+        const marketType: MarketType = { id: type_id, ...rest };
+        cache.set(id, marketType);
+        return marketType;
     });
 };
 

src/market/type/MarketTypeInput.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { vOnClickOutside } from '@vueuse/components';
-import { useVirtualList } from '@vueuse/core';
+import {vOnClickOutside} from '@vueuse/components';
+import {useVirtualList} from '@vueuse/core';
 import log from 'loglevel';
-import { nextTick, ref, watch, watchEffect } from 'vue';
-import { MarketType, searchMarketTypes } from './MarketType';
+import {nextTick, ref, watch, watchEffect} from 'vue';
+import {MarketType, searchMarketTypes} from './MarketType';
 import MarketTypeLabel from "./MarketTypeLabel.vue";
 
 interface Emits {
@@ -89,7 +89,7 @@ watchEffect(async () => {
 <template>
     <div @click="() => isOpen = true" v-on-click-outside="() => isOpen = false">
         <div class="fake-input">
-            <img v-if="modelValue?.id" :src="`https://images.evetech.net/types/${modelValue.id}/icon?size=32`" alt="" />
+            <img v-if="modelValue?.type_id" :src="`https://images.evetech.net/types/${modelValue.type_id}/icon?size=32`" alt="" />
             <input type="text" v-model="name" @keyup.enter="submit" @keyup.down="moveDown" @keyup.up="moveUp" />
         </div>
         <div v-if="suggestions.length > 1" class="z-20 absolute w-96">
@@ -105,7 +105,7 @@ watchEffect(async () => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 .fake-input {
     @apply w-96 flex border bg-slate-500 rounded px-1 py-0.5;
 

src/market/type/MarketTypeLabel.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { ClipboardButton } from '@/components';
-import { InformationCircleIcon } from '@heroicons/vue/24/outline';
-import { routeNames } from '@/routes';
+import {ClipboardButton} from '@/components';
+import {InformationCircleIcon} from '@heroicons/vue/24/outline';
+import {routeNames} from '@/routes';
+import {computedAsync} from "@vueuse/core";
+import {getMarketType} from "@/market";
 
 
 interface Props {
@@ -10,29 +12,39 @@ interface Props {
     hideCopy?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
     name: "",
     id: 0,
     hideCopy: false
 });
+
+const computedName = computedAsync<string>(async () => {
+  if (props.name) {
+    return props.name;
+  } else if (props.id) {
+    return await getMarketType(props.id).then(marketType => marketType.name);
+  }
+  return "";
+}, "");
 </script>
 
 <template>
-    <div v-if="id || name" class="flex flex-row">
+    <div v-if="id || computedName" class="flex flex-row">
         <img v-if="id" :src="`https://images.evetech.net/types/${id}/icon?size=32`" class="inline-block w-5 h-5 me-1 mt-1" alt="" />
-        <template v-if="name">
-            {{ name }}
-            <RouterLink v-if="id" :to="{ name: routeNames.marketTypes, params: { type: id } }" class="button btn-icon ms-1 me-1 mt-1" title="Show item info">
+        <template v-if="computedName">
+          {{ computedName }}
+          <RouterLink v-if="id" :to="{ name: routeNames.marketTypes, params: { type: id } }" class="btn-icon ms-1 me-1 mt-1" title="Show item info">
                 <InformationCircleIcon  />
             </RouterLink>
-            <ClipboardButton v-if="!hideCopy" :value="name" />
+            <ClipboardButton v-if="!hideCopy" :value="computedName" />
         </template>
     </div>
 </template>
 
 <style scoped>
-@reference "tailwindcss";
-button:deep(>svg), .button:deep(>svg) {
+@reference "@/style.css";
+
+button:deep(>svg), .btn-icon:deep(>svg) {
     @apply !w-4 !h-4;
 }
 </style>

src/pages/Ledgers.vue

@@ -2,13 +2,14 @@
 import {RouterView} from 'vue-router';
 import {EditLedgerModal, useLedgersStore} from "@/ledger";
 import {ref} from "vue";
-import {processingApi} from "@/mammon";
+import {activityApi, processingApi} from "@/mammon";
 
 const {refresh} = useLedgersStore();
 
 const editLedgerModal = ref<typeof EditLedgerModal>();
 
 const processActivities = async () => {
+  await activityApi.fetchAllNewActivities();
   await processingApi.processNewActivities();
   await refresh();
 }

src/pages/ledger/ListLedgerTransactions.vue

@@ -1,29 +1,40 @@
 <script setup lang="ts">
 
-import {ref, watch} from "vue";
-import {useRoute} from "vue-router";
-import log from "loglevel";
-import {findAllTransactionInLeger, Ledger, TransferTypes, useLedgersStore} from "@/ledger";
+import {findAllTransactionInLeger, useLedgerParam} from "@/ledger";
 import {computedAsync} from "@vueuse/core";
 import {TransactionResponse} from "@/generated/mammon";
-import {formatEveDate} from "@/formaters.ts";
 import {IskLabel} from "@/market";
+import {SortableHeader, useSort, VirtualScrollTable} from "@/components/table";
+import {TransferList, TransferTypes} from "@/transaction";
+import {Dropdown} from "@/components";
+import {CharacterLabel, useCharactersStore} from "@/characters";
+import {formatEveDate} from "@/formaters.ts";
 
-const {findById, refresh} = useLedgersStore();
-
-const ledger = ref<Ledger>();
+const {ledgerId} = useLedgerParam();
+const {findById} = useCharactersStore();
 
 const transactions = computedAsync<TransactionResponse[]>(async () => {
-  if (ledger.value) {
-    return await findAllTransactionInLeger(ledger.value.ledgerId);
+  if (ledgerId.value) {
+    return await findAllTransactionInLeger(ledgerId.value);
   }
   return [];
 }, []);
 
-const getIskBalance = (transaction: TransactionResponse) => {
-  const ledgerId = ledger.value?.ledgerId;
+const { sortedArray, headerProps } = useSort(computedAsync(() => Promise.all(transactions.value.map(async transaction => {
+  const character = await findById(transaction.characterId);
+  return {
+    character,
+    characterName: character?.name ?? "",
+    transactionId: transaction.transactionId,
+    description: transaction.description,
+    date: new Date(transaction.datetime),
+    balance: getIskBalance(transaction),
+    transfers: transaction.transfers
+  }
+})), []), { defaultSortKey: 'date', defaultSortDirection: 'desc' });
 
-  if (!ledgerId) {
+const getIskBalance = (transaction: TransactionResponse) => {
+  if (!ledgerId.value) {
     return 0;
   }
 
@@ -31,37 +42,65 @@ const getIskBalance = (transaction: TransactionResponse) => {
 
   for (const transfer of transaction.transfers) {
     if (transfer.type === TransferTypes.Isk) {
-      if (transfer.toLedgerId === ledgerId) {
+      if (transfer.toLedgerId === ledgerId.value) {
         balance += transfer.amount;
-      } else if (transfer.fromLedgerId === ledgerId) {
+      } else if (transfer.fromLedgerId === ledgerId.value) {
         balance -= transfer.amount;
       }
     }
   }
   return balance;
 }
-
-watch(useRoute(), async route => {
-  if (route.params.ledgerId) {
-    const id = typeof route.params.ledgerId === 'string' ? route.params.ledgerId : route.params.ledgerId[0];
-
-    await refresh() // FIXME
-
-    ledger.value = findById(id)
-    log.info('Loaded ledger:', ledger.value);
-  } else {
-    ledger.value = undefined;
-    log.info('No ledger to load');
-  }
-}, { immediate: true })
 </script>
 
 <template>
   <div class="mt-4">
-    <div class="flex items-end gap-2 mt-2" v-for="transaction in transactions" :key="transaction.transactionId">
-      <span>{{formatEveDate(new Date(transaction.datetime))}}</span>
-      <IskLabel :amount="getIskBalance(transaction)" />
-      <span>{{transaction.description}}</span>
-    </div>
+    <VirtualScrollTable :list="sortedArray" :itemHeight="33" bottom="1rem">
+      <template #default="{ list }">
+        <thead>
+        <tr>
+          <SortableHeader v-bind="headerProps" sortKey="characterName">Character</SortableHeader>
+          <SortableHeader v-bind="headerProps" sortKey="date">Date</SortableHeader>
+          <SortableHeader v-bind="headerProps" sortKey="balance">Isk Change</SortableHeader>
+          <SortableHeader v-bind="headerProps" sortKey="description">Description</SortableHeader>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="t in list" :key="t.data.transactionId">
+          <td>
+            <CharacterLabel v-if="t.data.character" :character="t.data.character" />
+          </td>
+          <td>
+            <Dropdown class="transfer-dropdown">
+              <template #button>
+                {{formatEveDate(t.data.date)}}
+              </template>
+              <TransferList :transfers="t.data.transfers" />
+            </Dropdown>
+          </td>
+          <td class="text-right">
+            <IskLabel :amount="t.data.balance" />
+          </td>
+          <td>{{t.data.description}}</td>
+        </tr>
+        </tbody>
+      </template>
+    </VirtualScrollTable>
   </div>
 </template>
+
+<style scoped>
+@reference "@/style.css";
+
+tr:hover>td>.transfer-dropdown :deep(>button) {
+  @apply bg-slate-900;
+}
+
+.transfer-dropdown :deep(>button) {
+  @apply bg-slate-800 hover:bg-slate-900 border-none flex items-center w-full;
+}
+
+.transfer-dropdown.dropdown-open :deep(>button) {
+  @apply bg-slate-800 rounded-b-none;
+}
+</style>

src/pages/ledger/ListLedgers.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 
-import {EditLedgerModal, LedgerLabel, useLedgersStore} from "@/ledger";
+import {EditLedgerModal, Ledger, LedgerLabel, useLedgersStore} from "@/ledger";
 import {storeToRefs} from "pinia";
 import {nextTick, ref} from "vue";
 import {PencilSquareIcon} from "@heroicons/vue/24/outline";
 import {IskLabel} from "@/market";
+import {SortableHeader, useSort, VirtualScrollTable} from "@/components/table";
 
 const {ledgers} = storeToRefs(useLedgersStore());
 
+const { sortedArray, headerProps } = useSort<Ledger>(ledgers);
+
 const editModal = ref<typeof EditLedgerModal>();
 const editingLedgerId = ref("");
 
@@ -21,13 +24,35 @@ const openEdit = async (ledgerId: string) => {
 
 <template>
   <div class="mt-4">
-    <div v-for="ledger in ledgers" :key="ledger.ledgerId" class="flex items-center mb-2">
-      <LedgerLabel :ledger="ledger" :link="true" />
-      <div class="flex grow">
-        <IskLabel class="ms-2" :amount="ledger.balance" />
-      </div>
-      <button class="btn-icon ms-2" @click="openEdit(ledger.ledgerId)"><PencilSquareIcon /></button>
-    </div>
+    <VirtualScrollTable :list="sortedArray" :itemHeight="33" bottom="1rem">
+      <template #default="{ list }">
+        <thead>
+        <tr>
+          <SortableHeader v-bind="headerProps" sortKey="name">Ledger</SortableHeader>
+          <SortableHeader v-bind="headerProps" sortKey="balance">Isk Balance</SortableHeader>
+          <SortableHeader v-bind="headerProps" sortKey="buttons" unsortable />
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="l in list" :key="l.data.ledgerId">
+          <td>
+            <LedgerLabel :ledger="l.data" :link="true" />
+          </td>
+          <td class="text-right">
+            <IskLabel class="ms-2" :amount="l.data.balance" />
+          </td>
+          <td class="text-right">
+            <button class="btn-icon ms-2" @click="openEdit(l.data.ledgerId)"><PencilSquareIcon /></button>
+          </td>
+        </tr>
+        </tbody>
+      </template>
+      <template #empty>
+        <div class="text-center mt-4">
+          <span>No ledgers found</span>
+        </div>
+      </template>
+    </VirtualScrollTable>
   </div>
   <EditLedgerModal ref="editModal" :ledger-id="editingLedgerId" />
 </template>

src/pages/ledger/ViewLedger.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import {RouterLink, RouterView} from 'vue-router';
+import {isMain, useLedgerParam} from "@/ledger";
+import {routeNames} from "@/routes.ts";
+
+const {ledgerId, ledger} = useLedgerParam();
+
+</script>
+
+<template>
+  <div v-if="ledger" class="mt-4">
+    <div class="flex border-b-2 border-emerald-500">
+      <RouterLink :to="{name: routeNames.viewLedgerBalance}" class="tab">
+        <span>Balance</span>
+      </RouterLink>
+      <RouterLink v-if="isMain(ledger)" :to="{name: routeNames.listLedgerTransactions}" class="tab">
+        <span>Transactions</span>
+      </RouterLink>
+    </div>
+    <RouterView />
+  </div>
+</template>

src/pages/ledger/ViewLedgerBalance.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {getLedgerBalance, useLedgerParam} from "@/ledger";
+import {computedAsync} from "@vueuse/core";
+import {BalanceResponse} from "@/generated/mammon";
+import {getMarketType, IskLabel, MarketTypeLabel} from "@/market";
+import {SortableHeader, useSort, VirtualScrollTable} from "@/components/table";
+
+const {ledgerId} = useLedgerParam();
+
+const balance = computedAsync<BalanceResponse>(async () => {
+  if (ledgerId.value) {
+    return await getLedgerBalance(ledgerId.value);
+  }
+  return undefined;
+});
+
+const { sortedArray, headerProps } = useSort(computedAsync(async () => {
+  const itemBalances = balance.value?.itemBalances;
+
+  if (!itemBalances) {
+    return [];
+  }
+
+  return await Promise.all(itemBalances.map(async i => {
+    const item = await getMarketType(i.typeId);
+
+    return {
+      ...i,
+      name: item.name
+    };
+  }));
+}, []));
+
+</script>
+
+<template>
+  <div v-if="balance" class="mt-4">
+    <div class="flex justify-end w-full">
+      <IskLabel class="mb-2" :amount="balance.iskBalance" />
+    </div>
+    <VirtualScrollTable :list="sortedArray" :itemHeight="33" bottom="1rem">
+      <template #default="{ list }">
+        <thead>
+        <tr>
+          <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
+          <SortableHeader v-bind="headerProps" sortKey="quantity">Balance</SortableHeader>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="i in list" :key="i.data.typeId">
+          <td>
+            <MarketTypeLabel :id="i.data.typeId" :name="i.data.name" />
+          </td>
+          <td class="text-right">{{i.data.quantity}}</td>
+        </tr>
+        </tbody>
+      </template>
+    </VirtualScrollTable>
+  </div>
+</template>

src/pages/market/Acquisitions.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { MarketTypePrice, getMarketTypes, useApraisalStore } from "@/market";
-import { AcquiredType, AcquisitionResultTable, BuyModal, SellModal, useAcquiredTypesStore } from '@/market/acquisition';
-import { ref, watch } from 'vue';
+import {getMarketTypes, MarketTypePrice, useApraisalStore} from "@/market";
+import {AcquiredType, AcquisitionResultTable, BuyModal, SellModal, useAcquiredTypesStore} from '@/market/acquisition';
+import {ref, watch} from 'vue';
+import {activityApi, processingApi} from "@/mammon";
 
 const buyModal = ref<typeof BuyModal>();
 const sellModal = ref<typeof SellModal>();
@@ -10,7 +11,11 @@ const apraisalStore = useApraisalStore();
 const acquiredTypesStore = useAcquiredTypesStore();
 const items = ref<AcquiredType[]>([]);
 
-const refresh = async () => await acquiredTypesStore.refresh();
+const refresh = async () => {
+  await activityApi.fetchAllNewActivities();
+  await processingApi.processNewActivities();
+  await acquiredTypesStore.refresh();
+}
 
 watch(() => acquiredTypesStore.acquiredTypes, async itms => {
     if (itms.length === 0) {

src/pages/market/TypeInfo.vue

@@ -115,7 +115,7 @@ watch(useRoute(), async route => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 img.type-image {
     width: 64px;

src/pages/rules/EditCharacterRuleBook.vue

@@ -15,7 +15,7 @@ import {isMain, Ledger, LedgerSelect, systemLedger, useLedgersStore} from "@/led
 type Bindings = { [key: string]: Ledger; };
 
 const ruleBookStore = useRuleBooksStore();
-const {findById: findCharacterRuleBookById} = ruleBookStore;
+const {findById: findRuleBookById} = ruleBookStore;
 const {ruleBooks} = storeToRefs(ruleBookStore);
 const {findById: findCharacterById} = useCharactersStore();
 const {ledgers} = storeToRefs(useLedgersStore());
@@ -25,6 +25,7 @@ const ledgersToUse = computed(() => [systemLedger, ...ledgers.value.filter(isMai
 const character = ref<Character>();
 const ruleBook = ref<RuleBook>();
 const bindings = ref<Bindings>({});
+const ledgerRefs = computed<string[]>(() => ruleBook.value?.ledgerRefs ?? [])
 
 watchEffect(async () => {
   const characterId = character.value?.characterId;
@@ -32,7 +33,7 @@ watchEffect(async () => {
   if (characterId) {
     const characterRuleBook = await findCharacterRuleBookByCharacterId(characterId);
 
-    ruleBook.value = findCharacterRuleBookById(characterRuleBook.ruleBookId);
+    ruleBook.value = findRuleBookById(characterRuleBook.ruleBookId);
     bindings.value = Object.fromEntries(
       Object.entries(characterRuleBook.bindings)
         .map(([key, id]) => [key, ledgersToUse.value.find(l => l.ledgerId === id) ?? systemLedger])
@@ -85,9 +86,9 @@ watch(useRoute(), async route => {
     <div class="flex-col border-b-1">
       Ledger Bindings:
       <div class="flex flex-wrap items-center mb-2 mt-2">
-        <div class="me-2" v-for="ref in ruleBook.ledgerRefs" :ref="ref">
+        <div class="me-2" v-for="ref in ledgerRefs" :ref="ref">
           <span class="me-1">{{ref}}:</span>
-          <LedgerSelect :ledgers="ledgersToUse" :modelValue="bindings[ref] ?? systemLedger" @update:modelValue="value => bindings[ref] = value" />
+          <LedgerSelect :ledgers="ledgersToUse" :modelValue="bindings[ref] ?? systemLedger" @update:modelValue="value => { if (value) bindings[ref] = value }" />
         </div>
       </div>
     </div>

src/pages/rules/EditRuleBook.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import {useRoute, useRouter} from "vue-router";
 import {ref, watch} from "vue";
-import {useDebounceFn} from "@vueuse/core";
+import {useDebounceFn, useEventListener} from "@vueuse/core";
 import log from "loglevel";
-import {activityTypes, RuleInput, Rules, useRuleBooksStore} from "@/rules";
+import {ScriptEditor, useRuleBooksStore} from "@/rules";
 import {PlusIcon, TrashIcon} from "@heroicons/vue/24/outline";
 import {routeNames} from "@/routes";
-import {Dropdown} from "@/components";
+import {SliderCheckbox} from "@/components";
 
 const ruleBookId = ref<string>();
 const name = ref<string>('');
+const usedForAcquisitions = ref<boolean>(false);
 const ledgerRefs = ref<string[]>([]);
-const rules = ref<Rules>({});
+const script = ref<string>('');
 
 const {findById, create, update, refresh} = useRuleBooksStore();
 const router = useRouter();
@@ -20,20 +21,29 @@ const save = async () => {
   if (!ruleBookId.value) {
     const created = await create({
       name: name.value,
+      usedForAcquisitions: usedForAcquisitions.value,
       ledgerRefs: ledgerRefs.value,
-      rules: rules.value
+      script: script.value
     })
     await router.push({ name: routeNames.editRuleBook, params: {ruleBookId: created.ruleBookId}})
 
   } else {
     await update(ruleBookId.value, {
       name: name.value,
+      usedForAcquisitions: usedForAcquisitions.value,
       ledgerRefs: ledgerRefs.value,
-      rules: rules.value
+      script: script.value
     })
   }
 }
 
+useEventListener(window, 'keydown', (event: KeyboardEvent) => {
+  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 's') {
+    event.preventDefault();
+    save();
+  }
+}, {capture: true});
+
 const addLedgerRef = () => {
   ledgerRefs.value = [...ledgerRefs.value, '']
 }
@@ -57,46 +67,47 @@ watch(useRoute(), async route => {
 
     ruleBookId.value = id;
     name.value = ruleBook?.name ?? '';
-    ledgerRefs.value = [...ruleBook?.ledgerRefs];
-    rules.value = {...ruleBook?.rules}; // TODO fully clone rules
+    usedForAcquisitions.value = ruleBook?.usedForAcquisitions ?? false;
+    ledgerRefs.value = [...(ruleBook?.ledgerRefs ?? [])];
+    script.value = ruleBook?.script ?? '';
     log.info('Loaded rule book:', ruleBook);
   } else {
     ruleBookId.value = undefined;
     name.value = '';
+    usedForAcquisitions.value = false;
     ledgerRefs.value = [];
-    rules.value = {};
+    script.value = '';
     log.info('No rule book to load');
   }
 }, { immediate: true })
 </script>
 
 <template>
-  <div  class="grid mb-2 mt-4">
-    <div class="flex flex-col">
+  <div  class="flex flex-col mb-2 mt-4 h-[calc(100vh-4.5rem)]">
+    <div class="flex flex-col grow min-h-0">
       <div class="flex grow border-b-1">
         Name:
         <input class="mb-2 ms-2" type="text" v-model="name" />
+        <label class="flex items-center ms-2 mb-2">
+          <SliderCheckbox class="me-2" v-model="usedForAcquisitions"  />
+          Used for acquisitions
+        </label>
       </div>
       <div class="border-b-1">
         Ledgers References:
-        <div class="flex flex-wrap items-center">
+        <div class="flex flex-wrap items-center mt-2">
           <div class="flex items-center mb-2" v-for="(ledgerRef, index) in ledgerRefs" :key="index">
-            <input class="me-1" type="text" :value="ledgerRefs[index]" @input="updateLedgerRef(index, ($event.target as HTMLInputElement).value)" />
-            <button class="btn-icon me-2" @click="addLedgerRef"><TrashIcon /></button>
+            <input class="me-1" type="text" :value="ledgerRef" @input="updateLedgerRef(index, ($event.target as HTMLInputElement).value)" />
+            <button class="btn-icon me-2" @click="removeLedgerRef(index)"><TrashIcon /></button>
           </div>
           <div class="flex items-center mb-2">
-            <button class="btn-icon" @click="removeLedgerRef(index)"><PlusIcon /></button>
+            <button class="btn-icon" @click="addLedgerRef"><PlusIcon /></button>
           </div>
         </div>
       </div>
-      <div class="flex flex-col grow border-b-1" v-for="activityType in activityTypes" :key="activityType.key">
-        <Dropdown :inline="true" :autoClose="false" class="rule-dropdown">
-          <template #button>
-            <span>{{ activityType.name }}</span>
-          </template>
-          <RuleInput :ledgerRefs="ledgerRefs" v-model="rules[activityType.key]" />
-        </Dropdown>
-
+      <div class="flex flex-col grow min-h-0 border-b-1">
+        Script:
+        <ScriptEditor class="mt-2 mb-2" v-model="script" :ledgerRefs="ledgerRefs" />
       </div>
     </div>
     <div class="mt-2 justify-end flex">
@@ -105,16 +116,4 @@ watch(useRoute(), async route => {
       </div>
     </div>
   </div>
-</template>
-
-<style scoped>
-@reference "tailwindcss";
-
-.rule-dropdown :deep(>button) {
-  @apply bg-slate-800 hover:bg-slate-800 border-none flex items-center w-full;
-}
-
-.rule-dropdown.dropdown-open :deep(>button) {
-  @apply bg-slate-800 rounded-b-none;
-}
-</style>
+</template>

src/pages/rules/ListCharacterRuleBooks.vue

@@ -1,18 +1,57 @@
 <script setup lang="ts">
 import {storeToRefs} from "pinia";
-import {CharacterLabel, useCharactersStore} from "@/characters";
+import {Character, CharacterLabel, useCharactersStore} from "@/characters";
 import {PencilSquareIcon} from "@heroicons/vue/24/outline";
-import {routeNames} from "@/routes";
+import {findCharacterRuleBookByCharacterId, useRuleBooksStore} from "@/rules";
+import {computedAsync} from "@vueuse/core";
+import {routeNames} from "@/routes.ts";
+import {SortableHeader, useSort} from "@/components/table";
+
+type CharacterRuleBookView = {
+  character: Character;
+  characterName: string;
+  characterId: number;
+  ruleBookName: string;
+}
 
 const {characters} = storeToRefs(useCharactersStore());
+const {findById: findRuleBookById} = useRuleBooksStore();
 
+
+const { sortedArray, headerProps } = useSort(computedAsync<CharacterRuleBookView[]>(async () => await Promise.all(characters.value.map(async (character: Character): Promise<CharacterRuleBookView> => {
+  const characterRuleBook = await findCharacterRuleBookByCharacterId(character.characterId);
+  const ruleBook = findRuleBookById(characterRuleBook.ruleBookId);
+
+  return {
+    character,
+    characterName: character.name,
+    characterId: character.characterId,
+    ruleBookName: ruleBook?.name ?? ''
+  }
+})), []))
 </script>
 
 <template>
   <div class="grid mb-2 mt-4">
-    <div v-for="character in characters" :key="character.characterId" class="flex items-center mb-2">
-      <CharacterLabel class="flex grow" :character="character" />
-      <RouterLink class="btn-icon ms-2" :to="{ name: routeNames.editCharacterRulebook, params: { characterId: character.characterId } }"><PencilSquareIcon /></RouterLink>
-    </div>
+    <table>
+      <thead>
+      <tr>
+        <SortableHeader v-bind="headerProps" sortKey="characterName">Character</SortableHeader>
+        <SortableHeader v-bind="headerProps" sortKey="ruleBookName">Rule Book</SortableHeader>
+        <SortableHeader v-bind="headerProps" sortKey="buttons" unsortable />
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="characterRuleBookView in sortedArray" :key="characterRuleBookView.characterId" >
+        <td>
+          <CharacterLabel :character="characterRuleBookView.character" />
+        </td>
+        <td>{{characterRuleBookView.ruleBookName}}</td>
+        <td class="text-right">
+          <RouterLink class="btn-icon" :to="{ name: routeNames.editCharacterRulebook, params: { characterId: characterRuleBookView.characterId } }"><PencilSquareIcon /></RouterLink>
+        </td>
+      </tr>
+      </tbody>
+    </table>
   </div>
 </template>

src/pages/rules/ListRuleBooks.vue

@@ -1,10 +1,24 @@
 <script setup lang="ts">
 import {storeToRefs} from "pinia";
-import {PencilSquareIcon, TrashIcon} from "@heroicons/vue/24/outline";
-import {useRuleBooksStore} from "@/rules";
+import {DocumentDuplicateIcon, PencilSquareIcon, TrashIcon} from "@heroicons/vue/24/outline";
+import {confirm} from "@/confirm";
+import {RuleBook, useRuleBooksStore} from "@/rules";
 import {routeNames} from "@/routes";
 
-const {ruleBooks} = storeToRefs(useRuleBooksStore());
+const ruleBooksStore = useRuleBooksStore();
+const {ruleBooks} = storeToRefs(ruleBooksStore);
+
+const duplicate = async (ruleBook: RuleBook) => {
+  if (await confirm({title: "Duplicate Rule Book", message: `Duplicate ${ruleBook.name}?`, confirmLabel: "Duplicate"})) {
+    await ruleBooksStore.duplicate(ruleBook);
+  }
+};
+
+const remove = async (ruleBook: RuleBook) => {
+  if (await confirm({title: "Delete Rule Book", message: `Delete ${ruleBook.name}?`, confirmLabel: "Delete", danger: true})) {
+    await ruleBooksStore.remove(ruleBook.ruleBookId);
+  }
+};
 
 </script>
 
@@ -16,7 +30,8 @@ const {ruleBooks} = storeToRefs(useRuleBooksStore());
     <div v-for="ruleBook in ruleBooks" :key="ruleBook.ruleBookId" class="flex items-center mt-2">
       <span class="flex grow me-2">{{ruleBook.name}}</span>
       <RouterLink class="btn-icon me-1" :to="{ name: routeNames.editRuleBook, params: { ruleBookId: ruleBook.ruleBookId } }"><PencilSquareIcon /></RouterLink>
-      <button class="btn-icon"><TrashIcon /></button>
+      <button class="btn-icon me-1" @click="duplicate(ruleBook)"><DocumentDuplicateIcon /></button>
+      <button class="btn-icon text-amber-700 hover:text-amber-600" @click="remove(ruleBook)"><TrashIcon /></button>
     </div>
   </div>
 </template>

src/reprocess/BuySellSlider.vue

@@ -13,7 +13,7 @@ const modelValue = defineModel({ default: false });
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
     input:checked ~ span:last-child {
         --tw-translate-x: 1.75rem;
     }

src/routes.ts

@@ -3,7 +3,9 @@ import {RouteRecordRaw} from 'vue-router';
 export const routeNames = {
     home: 'home',
     callback: 'callback',
-    listLedgerTransactions: 'list-ledger-tTransactions',
+    viewLedger: 'view-ledger',
+    viewLedgerBalance: 'view-ledger-balance',
+    listLedgerTransactions: 'list-ledger-transactions',
     listRuleBooks: 'list-rule-books',
     newRuleBook: 'new-rule-book',
     editRuleBook: 'edit-rule-book',
@@ -18,11 +20,15 @@ export const routes: RouteRecordRaw[] = [
 
     {path: '/ledgers', component: () => import('@/pages/Ledgers.vue'), children: [
         {path: '', component: () => import('@/pages/ledger/ListLedgers.vue')},
-        {path: ':ledgerId/transactions', name: routeNames.listLedgerTransactions, component: () => import('@/pages/ledger/ListLedgerTransactions.vue')},
+        {path: ':ledgerId',  component: () => import('./pages/ledger/ViewLedger.vue'), children: [
+            {path: '', name: routeNames.viewLedger, redirect: {name: routeNames.viewLedgerBalance}},
+            {path: 'balance', name: routeNames.viewLedgerBalance, component: () => import('@/pages/ledger/ViewLedgerBalance.vue')},
+            {path: 'transactions', name: routeNames.listLedgerTransactions, component: () => import('@/pages/ledger/ListLedgerTransactions.vue')},
+        ]},
     ]},
 
     {path: '/rules', component: () => import('@/pages/Rules.vue'), children: [
-        {path: '', redirect: '/rule-books'},
+        {path: '', redirect: {name: routeNames.listRuleBooks}},
         {path: '/rule-books', children: [
             {path: '', name: routeNames.listRuleBooks, component: () => import('@/pages/rules/ListRuleBooks.vue')},
             {path: 'new', name: routeNames.newRuleBook, component: () => import('@/pages/rules/EditRuleBook.vue')},
@@ -35,7 +41,7 @@ export const routes: RouteRecordRaw[] = [
     ]},
 
     {path: '/market', component: () => import('@/pages/Market.vue'), children: [
-        {path: '', redirect: '/market/types'},
+        {path: '', redirect: {name: routeNames.marketTypes}},
         {path: 'types/:type?', name: routeNames.marketTypes, component: () => import('@/pages/market/TypeInfo.vue')},
         {path: 'tracking', component: () => import('@/pages/market/Tracking.vue')},
         {path: 'acquisitions', component: () => import('@/pages/market/Acquisitions.vue')},

src/rules/RuleClauseInput.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-
-import {RuleClauseResponse} from "@/generated/mammon";
-import {computed, watch} from "vue";
-import {systemLedgerRef} from "@/ledger";
-import {ratesTypes} from "@/rules/rules.ts";
-
-interface Props {
-  ledgerRefs: string[];
-}
-
-const props = defineProps<Props>()
-
-const rule = defineModel<RuleClauseResponse>({ default: {
-    rate: ratesTypes.None,
-    fromLedgerRef: systemLedgerRef,
-    toLedgerRef: systemLedgerRef,
-  }});
-
-const ledgerRefsWithSystem = computed<string[]>(() => [systemLedgerRef, ...props.ledgerRefs])
-
-watch(ledgerRefsWithSystem, (newVal, oldVal) => {
-  if (newVal.length !== oldVal.length) {
-    return;
-  }
-
-  if (rule.value.fromLedgerRef && rule.value.fromLedgerRef !== systemLedgerRef) {
-    rule.value.fromLedgerRef = newVal[oldVal.findIndex(v => v === rule.value.fromLedgerRef)]
-  }
-  if (rule.value.toLedgerRef && rule.value.toLedgerRef !== systemLedgerRef) {
-    rule.value.toLedgerRef = newVal[oldVal.findIndex(v => v === rule.value.toLedgerRef)]
-  }
-})
-</script>
-
-<template>
-  From:
-  <select class="me-2 grow" v-model="rule.fromLedgerRef" :class="{'system-ledger': rule.fromLedgerRef === systemLedgerRef}">
-    <option v-for="l in ledgerRefsWithSystem" :key="l" :value="l" :class="{'system-ledger': l === systemLedgerRef}">{{ l }}</option>
-  </select>
-  To:
-  <select class="me-2 grow" v-model="rule.toLedgerRef" :class="{'system-ledger': rule.toLedgerRef === systemLedgerRef}">
-    <option v-for="l in ledgerRefsWithSystem" :key="l" :value="l" :class="{'system-ledger': l === systemLedgerRef}">{{ l }}</option>
-  </select>
-  At:
-  <select class="me-2 grow" v-model="rule.rate">
-    <option v-for="rateType in ratesTypes" :key="rateType.key" :value="rateType.key">{{ rateType.name }}</option>
-  </select>
-</template>
-
-<style scoped>
-@reference "tailwindcss";
-
-.system-ledger {
-  @apply text-emerald-400;
-}
-</style>

src/rules/RuleInput.vue

@@ -1,76 +0,0 @@
-<script setup lang="ts">
-
-import {RuleClauseResponse, RuleClauseResponseRateEnum, RuleResponse} from "@/generated/mammon";
-import RuleClauseInput from "@/rules/RuleClauseInput.vue";
-import {computed, useTemplateRef} from "vue";
-import {Bars4Icon, PlusIcon, TrashIcon} from '@heroicons/vue/24/outline';
-import {useSortable} from "@vueuse/integrations/useSortable";
-import {systemLedgerRef} from "@/ledger";
-
-interface Props {
-  ledgerRefs: string[];
-}
-
-const props = defineProps<Props>()
-
-const rule = defineModel<RuleResponse>({default: {clauses:[]}});
-const clauses = computed<RuleClauseResponse[]>({
-  get: () =>  rule.value && rule.value.clauses ? rule.value.clauses : [],
-  set: value => rule.value = {clauses: value}
-})
-
-const addClause = () => {
-  clauses.value = [...clauses.value, {
-    rate: RuleClauseResponseRateEnum.None,
-    fromLedgerRef: systemLedgerRef,
-    toLedgerRef: systemLedgerRef
-  }]
-}
-
-const setClause = (index: number, clause?: RuleClauseResponse) => {
-  if (!clause) {
-    return;
-  }
-  clauses.value = clauses.value.with(index, clause)
-}
-
-const removeClause = (index: number) => {
-  clauses.value = clauses.value.toSpliced(index, 1)
-}
-
-const sortableContainer = useTemplateRef('sortable-container')
-useSortable(sortableContainer, clauses, { handle: '.sortable-handle'});
-</script>
-
-<template>
-<div class="flex-col">
-  <div ref="sortable-container" class="flex-col">
-    <div class="flex items-end gap-2 mt-2" v-for="(clause, index) in clauses" :key="index">
-      <span class="sortable-handle flex">
-        <Bars4Icon class="w-6"/>
-      </span>
-      <RuleClauseInput :ledgerRefs="ledgerRefs" :modelValue="clause" @update:modelValue="v => setClause(index, v)" />
-      <button class="btn-icon" @click="removeClause(index)"><TrashIcon /></button>
-    </div>
-  </div>
-  <div class="flex justify-end mb-2 mt-2">
-    <button class="btn-icon" @click="addClause"><PlusIcon /></button>
-  </div>
-</div>
-</template>
-
-<style scoped>
-@reference "tailwindcss";
-
-.sortable-handle {
-  @apply cursor-grab;
-}
-
-.sortable-chosen {
-  @apply cursor-grabbing;
-}
-
-.sortable-chosen .sortable-handle {
-  @apply cursor-grabbing;
-}
-</style>

src/rules/ScriptEditor.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import * as monaco from 'monaco-editor';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import {onBeforeUnmount, onMounted, ref, watch} from 'vue';
+import {fetchScriptDefinitions} from './rules';
+
+(self as unknown as { MonacoEnvironment: { getWorker(workerId: string, label: string): Worker } }).MonacoEnvironment = {
+  getWorker(_workerId: string, label: string) {
+    if (label === 'typescript' || label === 'javascript') {
+      return new tsWorker();
+    }
+    return new editorWorker();
+  }
+};
+
+let extraLibLoaded = false;
+
+const loadScriptDefinitions = async () => {
+  if (extraLibLoaded) {
+    return;
+  }
+  try {
+    const definitions = await fetchScriptDefinitions();
+    monaco.typescript.javascriptDefaults.addExtraLib(definitions, 'ts:rule-runner.d.ts');
+    extraLibLoaded = true;
+  } catch {
+    // type definitions are optional — the editor still works without autocomplete
+  }
+};
+
+const props = defineProps<{ ledgerRefs?: string[] }>();
+
+let ledgersLib: monaco.IDisposable | undefined;
+
+const updateLedgerRefs = (refs: readonly string[]) => {
+  ledgersLib?.dispose();
+  const members = refs
+      .filter(ref => ref && ref !== 'system')
+      .map(ref => `    readonly ${JSON.stringify(ref)}: Ledger;`)
+      .join('\n');
+  ledgersLib = monaco.typescript.javascriptDefaults.addExtraLib(
+      `declare interface Ledgers {\n${members}\n}\n`,
+      'ts:rule-runner.ledgers.d.ts'
+  );
+};
+
+const model = defineModel<string>({default: ''});
+const container = ref<HTMLElement>();
+let editor: monaco.editor.IStandaloneCodeEditor | undefined;
+
+onMounted(async () => {
+  await loadScriptDefinitions();
+  updateLedgerRefs(props.ledgerRefs ?? []);
+
+  if (!container.value) {
+    return;
+  }
+
+  editor = monaco.editor.create(container.value, {
+    value: model.value,
+    language: 'javascript',
+    theme: 'vs-dark',
+    automaticLayout: true,
+    minimap: {enabled: false},
+    scrollBeyondLastLine: false,
+    fontSize: 13,
+    tabSize: 2,
+  });
+
+  editor.onDidChangeModelContent(() => {
+    const value = editor!.getValue();
+
+    if (value !== model.value) {
+      model.value = value;
+    }
+  });
+});
+
+watch(model, value => {
+  if (editor && value !== editor.getValue()) {
+    editor.setValue(value ?? '');
+  }
+});
+
+watch(() => props.ledgerRefs, refs => updateLedgerRefs(refs ?? []), {deep: true});
+
+onBeforeUnmount(() => {
+  editor?.dispose();
+  ledgersLib?.dispose();
+});
+</script>
+
+<template>
+  <div ref="container" class="script-editor"></div>
+</template>
+
+<style scoped>
+.script-editor {
+  width: 100%;
+  flex: 1 1 auto;
+  min-height: 12rem;
+}
+</style>

src/rules/index.ts

@@ -1,3 +1,3 @@
 export * from "./rules";
 
-export {default as RuleInput} from './RuleInput.vue';
+export {default as ScriptEditor} from './ScriptEditor.vue';

src/rules/rules.ts

@@ -3,36 +3,12 @@ import {
     CharacterRuleBookResponse,
     CreateRuleBookRequest,
     RuleBookResponse,
-    RuleClauseResponseRateEnum,
-    RuleResponse,
     SetCharacterRuleBookRequest
 } from "@/generated/mammon";
 import {defineStore} from "pinia";
 import {ref, triggerRef} from "vue";
 
-export const activityTypes = {
-    itemBought: {key: "ITEM_BOUGHT", name: "Item Bought"},
-    itemSold: {key: "ITEM_SOLD", name: "Item Sold"},
-    itemAcquiredManually: {key: "ITEM_ACQUIRED_MANUALLY", name: "Item Acquired Manually"},
-    itemConsumedManually: {key: "ITEM_CONSUME_MANUALLY", name: "Item Consumed Manually"},
-    // bountyEarned:  {id: "BOUNTY_EARNED", name: "Bounty Earned"},
-    // itemManufactured:  {id: "ITEM_MANUFACTURED", name: "Item Manufactured"}
-} as const;
-
-export type Activity = { key: ActivityType, name: string }
-export type ActivityType = typeof activityTypes[keyof typeof activityTypes]['key'];
-export type Rules = { [key: ActivityType]: RuleResponse; };
-export type RuleBook = RuleBookResponse & { rules: Rules }
-
-export const ratesTypes = {
-    None: {key: "NONE", name: "0 ISK"},
-    Value: {key: "VALUE", name: "Value"},
-    JitaBuy: {key: "JITA_BUY", name: "Jita Buy Order"},
-    JitaSell: {key: "JITA_SELL", name: "Jita Sell Order"},
-    EveEstimate: {key: "EVE_ESTIMATE", name: "Eve Estimate"},
-} as const;
-
-export type Rate = { key: RuleClauseResponseRateEnum, name: string }
+export type RuleBook = RuleBookResponse;
 
 export const useRuleBooksStore = defineStore('rule-books', () => {
     const ruleBooks = ref<RuleBook[]>([]);
@@ -56,17 +32,30 @@ export const useRuleBooksStore = defineStore('rule-books', () => {
     const findById = (ruleBookId: string): RuleBook | undefined => ruleBooks.value.find(rb => rb.ruleBookId === ruleBookId);
     const create = (ruleBook: CreateRuleBookRequest) => ruleBookApi.createRuleBook(ruleBook).then(response => addRuleBook(response.data));
     const update = (ruleBookId: string, ruleBook: CreateRuleBookRequest) => ruleBookApi.updateRuleBook(ruleBookId, ruleBook).then(response => replaceRuleBook(response.data));
+    const duplicate = (ruleBook: RuleBook) => create({
+        name: `${ruleBook.name} (copy)`,
+        usedForAcquisitions: ruleBook.usedForAcquisitions,
+        ledgerRefs: [...ruleBook.ledgerRefs],
+        script: ruleBook.script,
+    });
 
-    const refresh = () => ruleBookApi.findAllRuleBooks().then(response => ruleBooks.value = response.data as RuleBook[]);
+    const remove = (ruleBookId: string) => ruleBookApi.deleteRuleBook(ruleBookId).then(() => {
+        ruleBooks.value = ruleBooks.value.filter(rb => rb.ruleBookId !== ruleBookId);
+    });
+
+    const refresh = () => ruleBookApi.findAllRuleBooks().then(response => ruleBooks.value = response.data);
 
     refresh();
 
-    return {ruleBooks, findById, create, update, refresh};
+    return {ruleBooks, findById, create, update, duplicate, remove, refresh};
 })
 
 export const findCharacterRuleBookByCharacterId = (characterId: number): Promise<CharacterRuleBookResponse> => characterRuleBookApi.findCharacterRuleBookByCharacterId(characterId)
     .then(response => response.data)
-    .catch(() => ({characterId, rules: {}}));
+    .catch(() => ({characterId, ruleBookId: '', bindings: {}}));
 
 export const setCharacterRuleBookForCharacter = (characterId: number, ruleBook: SetCharacterRuleBookRequest): Promise<CharacterRuleBookResponse> => characterRuleBookApi.setCharacterRuleBookForCharacter(characterId, ruleBook)
-    .then(response => response.data);
+    .then(response => response.data);
+
+export const fetchScriptDefinitions = (): Promise<string> =>
+    ruleBookApi.getScriptDefinitions({responseType: 'text'}).then(response => response.data);

src/sidebar/Sidebar.vue

@@ -4,9 +4,9 @@ import {RouterLink} from 'vue-router';
 import {routeNames} from '@/routes';
 
 const links = [
+  {name: "Market", path: "/market"},
   {name: "Ledger", path: "/ledgers"},
   {name: "Rules", path: "/rules"},
-  {name: "Market", path: "/market"},
   {name: "Reprocess", path: "/reprocess"},
   {name: "Tools", path: "/tools"}
 ];
@@ -49,7 +49,7 @@ const logout = async () => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 .sidebar-button {
   @apply flex items-center rounded-md hover:bg-slate-800 cursor-pointer;
@@ -63,14 +63,6 @@ const logout = async () => {
   @apply w-full;
 }
 
-.user-dropdown :deep(>div) {
-  @apply w-full;
-
-  > div {
-    @apply w-full bg-slate-800;
-  }
-}
-
 .user-dropdown :deep(>button) {
   @apply bg-slate-700 hover:bg-slate-800 border-none flex items-center w-full;
 }

src/style.css

@@ -2,6 +2,12 @@
 
 @custom-variant search-cancel (&::-webkit-search-cancel-button);
 
+@utility btn-icon {
+    @apply p-0 border-none bg-transparent hover:text-slate-400 hover:bg-transparent cursor-pointer;
+    > svg {
+        @apply w-6 h-6;
+    }
+}
 @layer base {
     span, table, input, th, tr, td, button, a.button, div, hr {
         @apply border-slate-600 text-slate-100 placeholder-slate-400;
@@ -72,10 +78,7 @@
     }
 
     .btn-icon {
-        @apply p-0 border-none bg-transparent hover:text-slate-400 hover:bg-transparent cursor-pointer;
-        > svg {
-            @apply w-6 h-6;
-        }
+        @apply btn-icon;
     }
 
     a.tab {

src/transaction/TransferList.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+
+import {TransferTypes} from "@/transaction/transaction.ts";
+import {LedgerLabel, systemLedger, useLedgersStore} from "@/ledger";
+import {getMarketType, IskLabel, MarketTypeLabel} from "@/market";
+import {computedAsync} from "@vueuse/core";
+import {TransferResponse} from "@/generated/mammon";
+
+type TransferWithValue = TransferResponse & { marketTypeId: number; };
+
+interface Props {
+  transfers?: TransferResponse[]
+}
+
+const props = defineProps<Props>();
+
+const {findById} = useLedgersStore();
+
+const sortedArray = computedAsync(async () => {
+  if (!props.transfers) {
+    return [];
+  }
+
+  return (await Promise.all(props.transfers.map(async (transfer: TransferWithValue, index) => {
+    const fromLedger = findById(transfer.fromLedgerId) ?? systemLedger
+    const toLedger = findById(transfer.toLedgerId) ?? systemLedger
+
+    const item = transfer.marketTypeId ? await getMarketType(transfer.marketTypeId) : undefined;
+
+    return {
+      ...transfer,
+      order: index,
+      fromLedger,
+      toLedger,
+      itemName: item ? item.name : '',
+      fromLedgerName: fromLedger.name,
+      toLedgerName: toLedger.name
+    }
+  }))).sort((a, b) => a.order - b.order)
+}, []);
+
+</script>
+
+<template>
+  <div>
+    <table>
+      <thead>
+      <tr>
+        <th>From</th>
+        <th>To</th>
+        <th>Item</th>
+        <th>Quantity/Amount</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="t in sortedArray">
+        <td>
+          <LedgerLabel :ledger="t.fromLedger" />
+        </td>
+        <td>
+          <LedgerLabel :ledger="t.toLedger" />
+        </td>
+        <template v-if="t.type === TransferTypes.Item">
+          <td>
+            <MarketTypeLabel :id="t.marketTypeId" :name="t.itemName" />
+          </td>
+          <td class="text-right">{{ t.quantity }}</td>
+        </template>
+        <template v-else-if="t.type === TransferTypes.Isk">
+          <td colspan="2" class="text-right">
+            <IskLabel :amount="t.amount" :colored="false" />
+          </td>
+        </template>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

src/transaction/index.ts

@@ -0,0 +1,3 @@
+export * from './transaction'
+
+export {default as TransferList} from './TransferList.vue';

src/transaction/transaction.ts

@@ -0,0 +1,7 @@
+import {TransferResponse} from "@/generated/mammon";
+
+export const TransferTypes = {
+    Isk: 'ISK',
+    Item: 'ITEM',
+} as const;
+export type TransferType = TransferResponse['type'];