item search

package.json

@@ -14,21 +14,23 @@
     "@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",
     "vue-router": "^5.0.7"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.3.0",
     "@types/node": "^25.8.0",
     "@vitejs/plugin-vue": "^6.0.7",
     "tailwindcss": "^4.3.0",
     "typescript": "^6.0.3",
-    "@tailwindcss/vite": "^4.3.0",
     "vite": "^8.0.13",
     "vite-plugin-runtime-env": "^1.0.0",
     "vitest": "^4.1.6",

src/App.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { RouterView, useRoute } from 'vue-router';
-import { Sidebar } from './sidebar';
+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();
 
 const hideSidebar = computed(() => {
-    return route.name === 'callback' || route.name === 'about';
+    return route.name === routeNames.callback || route.name === routeNames.about;
 });
 </script>
 
@@ -20,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/characters/CharacterLabel.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+import {Character} from "./chartacters.ts";
+
+interface Props {
+  character: Character;
+  size?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 32
+})
+</script>
+
+<template>
+  <div class="flex">
+    <img class="me-2" :src="`https://images.evetech.net/characters/${character.characterId}/portrait?size=${size}`" />
+    <span>{{ character.name }}</span>
+  </div>
+</template>

src/characters/chartacters.ts

@@ -0,0 +1,28 @@
+import {activityApi, characterApi} from "@/mammon";
+import {defineStore} from "pinia";
+import {ref} from "vue";
+import {CharacterResponse} from "@/generated/mammon";
+
+export type Character = CharacterResponse
+
+export const useCharactersStore = defineStore('characters', () => {
+    const characters = ref<Character[]>([]);
+
+    const findById = async (characterId: number): Promise<Character | undefined> => {
+        let character = characters.value.find(c => c.characterId === characterId);
+
+        if (!character) {
+            await refresh(); // TODO call api instead of refresh
+            character = characters.value.find(c => c.characterId === characterId);
+        }
+        return character;
+    }
+
+    const reloadActivities = (characterId: number): Promise<void> => activityApi.fetchNewActivitiesForCharacter(characterId) as Promise<void>;
+
+    const refresh = () => characterApi.findAllCharacters().then(response => characters.value = response.data);
+
+    refresh();
+
+    return {characters, findById, reloadActivities, refresh};
+})

src/characters/index.ts

@@ -0,0 +1,3 @@
+export * from './chartacters.ts'
+
+export {default as CharacterLabel} from './CharacterLabel.vue';

src/components/Dropdown.vue

@@ -1,22 +1,47 @@
 <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 {ChevronDownIcon, ChevronUpIcon} from '@heroicons/vue/24/outline';
+import {vOnClickOutside} from '@vueuse/components';
+import {useElementBounding, useEventListener} from '@vueuse/core';
+import {computed, ref} from 'vue';
+
+interface Props {
+  inline?: boolean;
+  autoClose?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  inline: false,
+  autoClose: true
+})
 
 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) {
+    isOpen.value = false;
+  }
+}
 
 useEventListener('keyup', e => {
     if (e.key === 'Escape') {
-        isOpen.value = false;
+      doAutoClose();
     }
 });
 </script>
 
 <template>
-    <div class="dropdown" :class="{'dropdown-open': isOpen, 'dropdown-close': !isOpen}" v-on-click-outside="() => isOpen = false">
-        <button @click="isOpen = !isOpen">
-            <slot name="button" />
+    <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"
@@ -25,6 +50,7 @@ useEventListener('keyup', e => {
                 <ChevronDownIcon v-if="!isOpen" class="chevron" />
                 <ChevronUpIcon v-else class="chevron" />
             </Transition>
+          <slot name="button" />
         </button>
 
         <Transition
@@ -32,19 +58,39 @@ useEventListener('keyup', e => {
             enter-from-class="opacity-0"
             leave-from-class="transition-opacity"
             leave-to-class="opacity-0">
-            <div v-if="isOpen" class="relative">
-                <div class="z-10 divide-y rounded-b-md absolute">
-                    <slot />
-                </div>
+            <div v-if="inline && isOpen">
+              <slot />
             </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 ms-1;
+    @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

@@ -0,0 +1,71 @@
+<script setup lang="ts" generic="T">
+import {vOnClickOutside} from '@vueuse/components';
+import {useVirtualList} from '@vueuse/core';
+import {computed, ref} from 'vue';
+
+interface Props {
+  items: T[];
+  itemHeight?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    itemHeight: 24,
+});
+
+const modelValue = defineModel<T>();
+
+const isOpen = ref(false);
+const currentIndex = ref(-1);
+const {list, scrollTo, containerProps, wrapperProps} = useVirtualList(computed(() => props.items), {
+    itemHeight: () => props.itemHeight,
+    overscan: 3,
+});
+
+const moveDown = () => {
+    currentIndex.value = currentIndex.value >= props.items.length - 1 ? 0 : currentIndex.value + 1;
+    scrollTo(currentIndex.value);
+};
+const moveUp = () => {
+    currentIndex.value = currentIndex.value <= 0 ? props.items.length - 1 : currentIndex.value - 1;
+    scrollTo(currentIndex.value);
+};
+const select = (item?: T) => {
+    modelValue.value = item;
+    currentIndex.value = -1;
+    isOpen.value = false;
+};
+const submit = () => {
+    if (currentIndex.value >= 0 && currentIndex.value < props.items.length) {
+        select(props.items[currentIndex.value]);
+    } else if (modelValue.value === undefined && props.items.length > 0) {
+        select(props.items[0]);
+    }
+};
+</script>
+
+<template>
+    <div @click="isOpen = true" v-on-click-outside="() => isOpen = false">
+      <div class="fake-input" @keyup.enter="submit" @keyup.down="moveDown" @keyup.up="moveUp">
+        <slot name="input" :value="modelValue" />
+      </div>
+        <div v-if="isOpen && items.length" class="z-20 absolute">
+            <div v-bind="containerProps" class="rounded-b" style="height: 300px">
+                <div v-bind="wrapperProps">
+                    <div v-for="s in list" :key="s.index"
+                        class="hover:bg-slate-700 cursor-pointer"
+                        :class="s.index === currentIndex ? 'bg-emerald-500' : 'bg-slate-500'"
+                        @click.stop="select(s.data)">
+                        <slot name="item" :item="s.data" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+@reference "@/style.css";
+.fake-input {
+    @apply flex border bg-slate-500 rounded px-1 py-0.5;
+}
+</style>

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/index.ts

@@ -3,6 +3,7 @@ export { default as Dropdown } from './Dropdown.vue';
 export { default as LoadingSpinner } from './LoadingSpinner.vue';
 export { default as Modal } from './Modal.vue';
 export { default as ProgressBar } from './ProgressBar.vue';
+export { default as SelectInput } from './SelectInput.vue';
 export { default as SliderCheckbox } from './SliderCheckbox.vue';
 export { default as Tooltip } from './tooltip/Tooltip.vue';
 

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,42 @@
+<script setup lang="ts">
+import {computed} from "vue";
+import {Modal} from "@/components";
+import {useConfirmStore} from "./useConfirm";
+
+const confirmStore = useConfirmStore();
+
+const modalOpen = computed({
+  get: () => confirmStore.open,
+  set: value => {
+    if (!value) {
+      confirmStore.cancel();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal v-model:open="modalOpen">
+    <div class="bg-slate-800 rounded pb-4 w-96">
+      <span class="m-2">{{ confirmStore.options.title ?? "Confirm" }}</span>
+      <hr />
+      <div class="m-4">{{ confirmStore.options.message }}</div>
+      <div class="flex justify-end">
+        <button class="me-2" @click="confirmStore.cancel">{{ confirmStore.options.cancelLabel ?? "Cancel" }}</button>
+        <button class="confirm me-4" :class="confirmStore.options.danger ? 'danger' : ''" @click="confirmStore.accept">{{ confirmStore.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/formaters.ts

@@ -11,7 +11,6 @@ export const percentFormater = new Intl.NumberFormat("en-US", {
     maximumFractionDigits: 0
 });
 
-
 const timeFormat = new Intl.NumberFormat("en-US", {
     minimumFractionDigits: 0,
     maximumFractionDigits: 0,

src/ledger/CreateLedgerModal.vue

@@ -1,73 +0,0 @@
-<script setup lang="ts">
-
-import {ref} from "vue";
-import {COMBINING_LEDGER, Ledger, LedgerType, MAIN_LEDGER, useLedgersStore} from "./ledger";
-import {Modal} from "@/components";
-import LedgerLine from "@/ledger/LedgerLine.vue";
-
-const modalOpen = ref<boolean>(false);
-
-const type = ref<LedgerType>(MAIN_LEDGER);
-const name = ref("");
-const members = ref<Ledger[]>([]);
-const {ledgers, createMain, createCombining} = useLedgersStore();
-
-const open = () => modalOpen.value = true;
-
-const create = () => {
-  if (type.value === MAIN_LEDGER) {
-    createMain({ name: name.value })
-  } else {
-    createCombining({ name: name.value, memberLedgerIds: members.value.map(l => l.ledgerId) })
-  }
-  modalOpen.value = false;
-}
-
-defineExpose({ open });
-</script>
-
-<template>
-  <Modal v-model:open="modalOpen">
-    <div class="bg-slate-800 rounded pb-4">
-      <span class="m-2">Creating {{ type === MAIN_LEDGER ? 'Main' : 'Combining' }} Ledger</span>
-      <hr />
-      <div class="mt-4">
-        <div class="flex justify-center">
-          <div class="flex bg-slate-600 rounded-s-md p-1">
-            <button class="switch" :class="{active: type === MAIN_LEDGER}" @click="type = MAIN_LEDGER">Main</button>
-          </div>
-          <div class="switch flex bg-slate-600 rounded-e-md p-1">
-            <button class="switch" :class="{active: type === COMBINING_LEDGER}" @click="type = COMBINING_LEDGER">Combining</button>
-          </div>
-        </div>
-        <div class="m-4">
-          Name:
-          <input type="text" v-model="name" />
-        </div>
-      </div>
-      <div v-if="type === COMBINING_LEDGER" class="mb-4">
-        Member Ledgers:
-        <div v-for="ledger in members">
-          <LedgerLine ledger="ledger" />
-        </div>
-        <select>
-          <option v-for="ledger in ledgers">{{ ledger.name}}</option>
-        </select>
-      </div>
-      <div class="flex justify-end">
-        <button class="me-4" @click="create">Create</button>
-      </div>
-    </div>
-  </Modal>
-</template>
-
-<style scoped>
-@reference "tailwindcss";
-
-button.switch {
-  @apply flex items-center px-4 rounded-md bg-slate-600;
-  &.active {
-    @apply bg-emerald-500;
-  }
-}
-</style>

src/ledger/EditLedgerModal.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+
+import {computed, ref} from "vue";
+import {isCombined, Ledger, LedgerType, LedgerTypes, useLedgersStore} from "./ledger";
+import {Modal} from "@/components";
+import LedgerLabel from "./LedgerLabel.vue";
+import {PlusIcon, TrashIcon} from '@heroicons/vue/24/outline';
+import LedgerSelect from "@/ledger/LedgerSelect.vue";
+
+interface Props {
+  ledgerId?: string;
+}
+
+const props = defineProps<Props>();
+
+const ledgersStore = useLedgersStore();
+
+const modalOpen = ref<boolean>(false);
+
+const type = ref<LedgerType>(LedgerTypes.Main);
+const name = ref("");
+const members = ref<Ledger[]>([]);
+const selectedLedger = ref<Ledger>();
+const availableLedgers = computed(() => ledgersStore.ledgers
+    .filter(l => l.ledgerId !== props.ledgerId)
+    .filter(l => !members.value.includes(l)));
+
+
+const addMember = () => {
+  if (selectedLedger.value && !members.value.includes(selectedLedger.value)) {
+    members.value = [...members.value, selectedLedger.value];
+    selectedLedger.value = undefined;
+  }
+}
+
+const open = () => {
+  const ledger = isCreating.value ? undefined : ledgersStore.findById(props.ledgerId);
+
+  if (ledger) {
+    type.value = ledger.type;
+    name.value = ledger.name;
+    members.value = isCombined(ledger) ? ledgersStore.findAllById(ledger.memberLedgerIds) : [];
+  } else {
+    type.value = LedgerTypes.Main;
+    name.value = "";
+    members.value = [];
+  }
+  modalOpen.value = true;
+}
+
+const canSave = computed(() => name.value.trim().length > 0);
+const isCreating = computed(() => props.ledgerId === undefined || props.ledgerId.length === 0);
+const title = computed(() => {
+  if (isCreating.value) {
+    return `Creating ${type.value === LedgerTypes.Main ? 'Main' : 'Combined'} Ledger`
+  }
+  return `Updating ${name.value}`
+})
+
+const create = () => {
+  if (type.value === LedgerTypes.Main) {
+    ledgersStore.createMain({name: name.value})
+  } else {
+    ledgersStore.createCombined({name: name.value, memberLedgerIds: members.value.map(l => l.ledgerId)})
+  }
+}
+
+const update = () => {
+  if (type.value === LedgerTypes.Main) {
+    ledgersStore.updateMain(props.ledgerId, {name: name.value})
+  } else {
+    ledgersStore.updateCombined(props.ledgerId, {name: name.value, memberLedgerIds: members.value.map(l => l.ledgerId)})
+  }
+}
+
+const save = () => {
+  if (!canSave.value) {
+    return;
+  }
+
+  if (isCreating.value) {
+    create();
+  } else {
+    update();
+  }
+  modalOpen.value = false;
+}
+
+defineExpose({ open });
+</script>
+
+<template>
+  <Modal v-model:open="modalOpen">
+    <div class="bg-slate-800 rounded pb-4 w-96">
+      <span class="m-2">{{ title }}</span>
+      <hr />
+      <div class="mt-4">
+        <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>
+          <div class="switch flex bg-slate-600 rounded-e-md p-1">
+            <button class="switch" :class="{active: type === LedgerTypes.Combined}" @click="type = LedgerTypes.Combined">Combined</button>
+          </div>
+        </div>
+        <div class="m-4">
+          Name:
+          <div class="flex">
+            <input type="text" class="flex grow" v-model="name" />
+          </div>
+        </div>
+      </div>
+      <div v-if="type === LedgerTypes.Combined" class="ms-4 mb-4">
+        Member Ledgers:
+        <div v-for="ledger in members" :key="ledger.ledgerId" class="flex">
+          <LedgerLabel class="flex grow mb-2" :ledger="ledger" />
+          <div class="flex justify-end me-4 ms-2">
+            <button class="btn-icon" @click="members = members.filter(m => m !== ledger)"><TrashIcon /></button>
+          </div>
+        </div>
+        <div v-if="availableLedgers.length" class="flex">
+          <LedgerSelect v-model="selectedLedger" class="grow" :ledgers="availableLedgers" />
+          <div class="flex justify-end me-4 ms-2">
+            <button class="btn-icon" @click="addMember"><PlusIcon /></button>
+          </div>
+        </div>
+      </div>
+      <div class="flex justify-end">
+        <button class="me-4" @click="save" :disabled="!canSave">Save</button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+@reference "@/style.css";
+
+button.switch {
+  @apply flex items-center px-4 rounded-md bg-slate-600;
+  &.active {
+    @apply bg-emerald-500;
+  }
+}
+</style>

src/ledger/LedgerLabel.vue

@@ -0,0 +1,31 @@
+<script setup lang="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";
+
+interface Props {
+  ledger: Ledger;
+  link?: boolean;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <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.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/LedgerLine.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-
-import {COMBINING_LEDGER, Ledger} from "@/ledger/ledger.ts";
-import {FolderOpenIcon} from '@heroicons/vue/24/outline';
-
-interface Props {
-  ledger: Ledger;
-}
-
-const props = defineProps<Props>();
-</script>
-
-<template>
-  <div class="flex">
-    <FolderOpenIcon v-if="ledger.type === COMBINING_LEDGER" class="w-6" />
-    <div v-else class="w-6"/>
-    <span>{{ ledger.name }}</span>
-  </div>
-</template>

src/ledger/LedgerSelect.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {Ledger, systemLedger, useLedgersStore} from "@/ledger/ledger.ts";
+import {computed} from "vue";
+
+interface Props {
+  ledgers?: Ledger[];
+}
+
+const props = defineProps<Props>()
+const ledger = defineModel<Ledger>();
+const ledgersStore = useLedgersStore();
+
+const ledgersToUse = computed(() => props.ledgers || ledgersStore.ledgers);
+const ledgerId = computed({
+  get: () => ledger.value?.ledgerId,
+  set: value => ledger.value = ledgersToUse.value.find(l => l.ledgerId === value)
+})
+
+</script>
+
+<template>
+  <select v-model="ledgerId" :class="{'system-ledger': ledger === systemLedger}">
+    <option v-for="l in ledgersToUse" :key="l.ledgerId" :value="l.ledgerId" :class="{'system-ledger': l === systemLedger}">{{ l.name }}</option>
+  </select>
+</template>
+
+<style scoped>
+@reference "@/style.css";
+
+.system-ledger {
+  @apply text-emerald-400;
+}
+</style>

src/ledger/index.ts

@@ -1,4 +1,5 @@
 export * from './ledger';
 
-export {default as LedgerLine} from './LedgerLine.vue';
-export {default as CreateLedgerModal} from './CreateLedgerModal.vue';
+export {default as LedgerLabel} from './LedgerLabel.vue';
+export {default as LedgerSelect} from './LedgerSelect.vue';
+export {default as EditLedgerModal} from './EditLedgerModal.vue';

src/ledger/ledger.ts

@@ -1,34 +1,88 @@
-import {CreateCombiningLedgerCommand, CreateMainLedgerCommand, FindAll200ResponseInner} from "@/generated/mammon";
+import {
+    BalanceResponse,
+    CombinedLedgerResponse,
+    CreateCombinedLedgerRequest,
+    CreateMainLedgerRequest,
+    LedgerResponse,
+    MainLedgerResponse,
+    TransactionResponse,
+    UpdateCombinedLedgerRequest,
+    UpdateMainLedgerRequest
+} from "@/generated/mammon";
 import {defineStore} from "pinia";
-import {ref} from "vue";
-import {ledgerControllerApi} from "@/mammon";
+import {computed, ref, triggerRef} from "vue";
+import {ledgerApi, transactionApi} from "@/mammon";
+import {useRouteParams} from "@vueuse/router";
 
-export const MAIN_LEDGER = "MAIN";
-export const COMBINING_LEDGER = "COMBINING";
+export const LedgerTypes = {
+    Main: 'MAIN',
+    Combined: 'COMBINED',
+};
 
-export type LedgerType = typeof MAIN_LEDGER | typeof COMBINING_LEDGER;
-export type Ledger = FindAll200ResponseInner;
+export type LedgerType = LedgerResponse['type'];
+export type MainLedger = MainLedgerResponse
+export type CombinedLedger = CombinedLedgerResponse
+export type Ledger = MainLedger | CombinedLedger;
+
+export const systemLedgerRef = 'system';
+export const systemLedger = {
+    type: LedgerTypes.Main,
+    ledgerId: "00000000-0000-0000-0000-000000000001",
+    name: "Eve Economy",
+    balance: 0,
+    _system: true
+} as MainLedger;
+
+export const isMain = (ledger: Ledger): ledger is MainLedger => {
+    return ledger.type === LedgerTypes.Main;
+}
+export const isCombined = (ledger: Ledger): ledger is CombinedLedger => {
+    return ledger.type === LedgerTypes.Combined;
+}
 
 export const useLedgersStore = defineStore('ledgers', () => {
     const ledgers = ref<Ledger[]>([]);
 
-    const createMain = (ledger: CreateMainLedgerCommand) => ledgerControllerApi.createMainLedger(ledger).then(response => {
-        const ledger = response.data;
-
+    const addLedger = (ledger: Ledger) => {
         ledgers.value.push(ledger);
+        triggerRef(ledgers);
         return ledger;
-    });
+    };
 
-    const createCombining = (ledger: CreateCombiningLedgerCommand) => ledgerControllerApi.createCombiningLedger(ledger).then(response => {
-        const ledger = response.data;
+    const replaceLedger = (ledger: Ledger) => {
+        const index = ledgers.value.findIndex(l => l.ledgerId === ledger.ledgerId);
 
-        ledgers.value.push(ledger);
+        if (index !== -1) {
+            ledgers.value[index] = ledger;
+        }
+        triggerRef(ledgers);
         return ledger;
-    });
+    };
 
-    const refresh = () => ledgerControllerApi.findAll().then(response => ledgers.value = response.data);
+    const findById = (ledgerId: string): Ledger | undefined => ledgers.value.find(l => l.ledgerId === ledgerId);
+    const findAllById = (ledgerIds: string[]): Ledger[] => ledgerIds.map(findById).filter((x): x is Ledger => x !== undefined)
+
+    const createMain = (ledger: CreateMainLedgerRequest) => ledgerApi.createMainLedger(ledger).then(response => addLedger(response.data as Ledger));
+    const createCombined = (ledger: CreateCombinedLedgerRequest) => ledgerApi.createCombinedLedger(ledger).then(response => addLedger(response.data as Ledger));
+    const updateMain = (ledgerId: string, ledger: UpdateMainLedgerRequest) => ledgerApi.updateMainLedger(ledgerId, ledger).then(response => replaceLedger(response.data as Ledger));
+    const updateCombined = (ledgerId: string, ledger: UpdateCombinedLedgerRequest) => ledgerApi.updateCombinedLedger(ledgerId, ledger).then(response => replaceLedger(response.data as Ledger));
+
+    const refresh = () => ledgerApi.findAllLedgers().then(response => ledgers.value = response.data as Ledger[]);
 
     refresh();
 
-    return {ledgers, createMain, createCombining, refresh};
-})
+    return {ledgers, findById, findAllById, createMain, createCombined, updateMain, updateCombined, refresh};
+})
+
+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 ledgersStore = useLedgersStore();
+    const ledgerId = useRouteParams<string, string>('ledgerId', '', { transform: v => typeof v === 'string' ? v : v[0]});
+    const ledger = computed(() => ledgersStore.findById(ledgerId.value))
+
+    return {ledgerId, ledger};
+}

src/mammon/mammonService.ts

@@ -1,9 +1,22 @@
 import {logResource} from "@/service";
 import axios from "axios";
-import {LegerControllerApi} from "@/generated/mammon";
+import {
+    AcquisitionApi,
+    ActivityApi,
+    CharacterApi,
+    CharacterRuleBookApi,
+    LedgerApi,
+    MarketApi,
+    ProcessingApi,
+    RuleBookApi,
+    TransactionApi
+} from "@/generated/mammon";
+
+export const mammonUrl = import.meta.env.VITE_MAMMON_URL;
+export const mammonAddCharacterUrl = mammonUrl + "oauth2/authorization/esi"
 
 const mammonAxiosInstance = axios.create({
-    baseURL: import.meta.env.VITE_MAMMON_URL,
+    baseURL: mammonUrl,
     headers: {
         'Accept': 'application/json',
         "Content-Type": "application/json",
@@ -11,4 +24,12 @@ const mammonAxiosInstance = axios.create({
 })
 logResource(mammonAxiosInstance)
 
-export const ledgerControllerApi = new LegerControllerApi(undefined, import.meta.env.VITE_MAMMON_URL, mammonAxiosInstance);
+export const ledgerApi = new LedgerApi(undefined, mammonUrl, mammonAxiosInstance);
+export const transactionApi = new TransactionApi(undefined, mammonUrl, mammonAxiosInstance);
+export const characterApi = new CharacterApi(undefined, mammonUrl, mammonAxiosInstance);
+export const ruleBookApi = new RuleBookApi(undefined, mammonUrl, mammonAxiosInstance);
+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);
+export const marketApi = new MarketApi(undefined, mammonUrl, mammonAxiosInstance);

src/market/IskLabel.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {formatIsk} from "@/formaters";
+import {computed} from "vue";
+
+interface Props {
+  amount: number;
+  colored?: boolean;
+}
+
+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="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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { LoadingSpinner, Tooltip } from '@/components';
-import { formatIsk } from '@/formaters';
-import { getHistory, getHistoryQuartils } from '@/market';
-import { ArrowTrendingDownIcon, ArrowTrendingUpIcon } from '@heroicons/vue/24/outline';
-import { computedAsync } from '@vueuse/core';
-import { ref, watchEffect } from 'vue';
+import {LoadingSpinner, Tooltip} from '@/components';
+import {formatIsk} from '@/formaters';
+import {getHistory, getHistoryQuartils} from '@/market';
+import {ArrowTrendingDownIcon, ArrowTrendingUpIcon} from '@heroicons/vue/24/outline';
+import {computedAsync} from '@vueuse/core';
+import {ref, watchEffect} from 'vue';
 
 const trendingScale = 3;
 
@@ -75,7 +75,8 @@ watchEffect(async () => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
+
 .tooltip {
     @apply ms-auto;
     >:deep(div.header) {

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/appraisal/appraisal.ts

@@ -1,21 +1,17 @@
-import { defineStore } from 'pinia';
-import { RegionalMarketCache } from '../RegionalMarketCache';
-import { jitaId } from '../market';
-import { MarketType } from "../type";
-import { MarketTypePrice } from './MarketTypePrice';
-import { getEvepraisalPrices } from './evepraisal';
-import { getfuzzworkPrices } from './fuzzwork';
+import {defineStore} from 'pinia';
+import {RegionalMarketCache} from '../RegionalMarketCache';
+import {jitaId} from '../market';
+import {MarketType} from "../type";
+import {MarketTypePrice} from './MarketTypePrice';
+import {getMammonPrices} from './mammon';
 
-const cacheDuration = 1000 * 60 * 5; // 5 minutes
-const priceGetters = {
-    evepraisal: getEvepraisalPrices,
-    fuzzwork: getfuzzworkPrices
-}
+const CACHE_DURATION = 1000 * 60 * 5; // 5 minutes
+const BATCH_SIZE = 100;
 
 export const useApraisalStore = defineStore('appraisal', () => {
-    const cache: RegionalMarketCache<MarketTypePrice> = new RegionalMarketCache(cacheDuration);
+    const cache: RegionalMarketCache<MarketTypePrice> = new RegionalMarketCache(CACHE_DURATION);
 
-    const getPricesUncached = priceGetters.fuzzwork;
+    const getPricesUncached = getMammonPrices;
 
     const getPrice = async (type: MarketType, regionId?: number): Promise<MarketTypePrice> => (await getPrices([type], regionId))[0];
     const getPrices = async (types: MarketType[], regionId?: number): Promise<MarketTypePrice[]> => {
@@ -34,7 +30,13 @@ export const useApraisalStore = defineStore('appraisal', () => {
         });
 
         if (uncached.length > 0) {
-            const prices = await getPricesUncached(uncached);
+            const batches: Promise<MarketTypePrice[]>[] = [];
+
+            for (let i = 0; i < uncached.length; i += BATCH_SIZE) {
+                batches.push(getPricesUncached(uncached.slice(i, i + BATCH_SIZE)));
+            }
+
+            const prices = (await Promise.all(batches)).flat();
 
             prices.forEach(p => cache.set(rId, p.type.id, p));
             return [ ...cached, ...prices ];

src/market/appraisal/evepraisal.ts

@@ -1,7 +1,5 @@
-import { logResource } from '@/service';
+import {logResource} from '@/service';
 import axios from 'axios';
-import { MarketType } from "../type";
-import { PriceGetter } from './MarketTypePrice';
 
 export const evepraisalAxiosInstance = axios.create({
     baseURL: import.meta.env.VITE_EVEPRAISAL_URL,
@@ -11,21 +9,3 @@ export const evepraisalAxiosInstance = axios.create({
     },
 })
 logResource(evepraisalAxiosInstance)
-
-const batchSize = 100;
-
-export const getEvepraisalPrices: PriceGetter = async types => {
-    const batches = [];
-
-    for (let i = 0; i < types.length; i += batchSize) {
-        batches.push(evepraisalAxiosInstance.post(`/appraisal.json?market=jita&persist=no&raw_textarea=${types.slice(i, i + batchSize).map(t => t.name).join("%0A")}`));
-    }
-    return (await Promise.all(batches))
-        .flatMap(b => b.data.appraisal.items)
-        .map((item: any) => ({
-            type: types.find(t => t.name === item.typeName) as MarketType,
-            buy: item.prices.buy.max,
-            sell: item.prices.sell.min,
-            orderCount: item.prices.all.order_count
-        }));
-};

src/market/appraisal/fuzzwork.ts

@@ -1,39 +0,0 @@
-import { logResource } from '@/service';
-import axios from 'axios';
-import { MarketType } from "../type";
-import { PriceGetter } from './MarketTypePrice';
-
-export const fuzzworkAxiosInstance = axios.create({
-    baseURL: import.meta.env.VITE_FUZZWORK_URL,
-    headers: {
-        'accept': 'application/json',
-        "Content-Type": "application/json"
-    },
-})
-logResource(fuzzworkAxiosInstance)
-
-const batchSize = 100;
-
-export const getfuzzworkPrices: PriceGetter = async types => {
-    const batches = [];
-
-    for (let i = 0; i < types.length; i += batchSize) {
-        batches.push(fuzzworkAxiosInstance.post(`/aggregates/?station=60003760&types=${types.slice(i, i + batchSize).map(t => t.id).join(",")}`));
-    }
-    return (await Promise.all(batches))
-        .flatMap(b => Object.entries(b.data))
-        .map(entry => {
-            const id = doParseInt(entry[0]);
-            const prices = entry[1] as any;
-
-            return {
-                type: types.find(t => t.id === id) as MarketType,
-                buy: doParseFloat(prices?.buy?.max),
-                sell: doParseFloat(prices?.sell?.min),
-                orderCount: doParseInt(prices?.buy?.order_count) + doParseInt(prices?.sell?.order_count)
-            }
-        });
-};
-
-const doParseInt = (s?: string) => s ? parseInt(s) : 0;
-const doParseFloat = (s?: string) => s ? parseFloat(s) : 0;

src/market/appraisal/mammon.ts

@@ -0,0 +1,20 @@
+import {marketApi} from '@/mammon/mammonService';
+import {MarketTypePrice, PriceGetter} from './MarketTypePrice';
+
+export const getMammonPrices: PriceGetter = async types => {
+    if (types.length === 0) {
+        return [];
+    }
+
+    const typesById = new Map(types.map(t => [t.id, t]));
+    const response = await marketApi.currentPrices(types.map(t => t.id));
+
+    return response.data.reduce<MarketTypePrice[]>((prices, p) => {
+        const type = typesById.get(p.marketTypeId);
+
+        if (type) {
+            prices.push({ type, buy: p.buy, sell: p.sell, orderCount: p.orderCount });
+        }
+        return prices;
+    }, []);
+};

src/market/history/EsiMarketOrderHistory.ts

@@ -1,30 +0,0 @@
-import { esiAxiosInstance } from "@/service";
-import { RegionalMarketCache } from '../RegionalMarketCache';
-import { jitaId } from "../market";
-
-
-export type EsiMarketOrderHistory = {
-    average: number;
-    date: string;
-    highest: number;
-    lowest: number;
-    order_count: number;
-    volume: number;
-}
-
-// TODO use pinia store
-const historyCache: RegionalMarketCache<EsiMarketOrderHistory[]> = new RegionalMarketCache(() => {
-    const date = new Date();
-
-    if (date.getUTCHours() >= 11) {
-        date.setUTCDate(date.getUTCDate() + 1);
-    }
-    date.setUTCHours(11, 0, 0, 0);
-    return date;
-});
-
-export const getHistory = async (typeId: number, regionId?: number): Promise<EsiMarketOrderHistory[]> => {
-    const rId = regionId ?? jitaId;
-
-    return historyCache.computeIfAbsent(rId, typeId, async () => (await esiAxiosInstance.get(`/markets/${rId}/history/`, { params: { type_id: typeId } })).data);
-}

src/market/history/HistoryQuartils.ts

@@ -1,4 +1,4 @@
-import { EsiMarketOrderHistory } from "@/market";
+import { MarketHistory } from "@/market";
 
 export type HistoryQuartils = {
     totalVolume: number,
@@ -7,7 +7,7 @@ export type HistoryQuartils = {
     q3: number,
 }
 
-export const getHistoryQuartils = (history: EsiMarketOrderHistory[], days?: number): HistoryQuartils => {
+export const getHistoryQuartils = (history: MarketHistory[], days?: number): HistoryQuartils => {
     const now = Date.now();
 
     const volumes = history
@@ -51,7 +51,7 @@ export const getHistoryQuartils = (history: EsiMarketOrderHistory[], days?: numb
     };
 }
 
-const estimateVolume = (history: EsiMarketOrderHistory): number => {
+const estimateVolume = (history: MarketHistory): number => {
     if (history.volume === 0) {
         return 0;
     }

src/market/history/MarketHistory.ts

@@ -0,0 +1,7 @@
+import { MarketHistoryResponse } from "@/generated/mammon";
+import { marketApi } from "@/mammon";
+
+export type MarketHistory = MarketHistoryResponse;
+
+export const getHistory = async (typeId: number): Promise<MarketHistory[]> =>
+    (await marketApi.findHistory(typeId)).data;

src/market/history/index.ts

@@ -1,2 +1,2 @@
-export * from './EsiMarketOrderHistory';
+export * from './MarketHistory';
 export * from './HistoryQuartils';

src/market/index.ts

@@ -6,3 +6,5 @@ export * from './type';
 export * from './appraisal';
 export * from './market';
 
+export { default as IskLabel } from './IskLabel.vue';
+

src/market/scan/ScanResultTable.vue

@@ -1,13 +1,13 @@
 <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 {formatIsk, percentFormater} from "@/formaters";
+import {MarketType, MarketTypeLabel} from "@/market";
+import {ShoppingCartIcon} from '@heroicons/vue/24/outline';
+import {useStorage} from '@vueuse/core';
+import {computed, ref} from 'vue';
+import {useAcquiredTypesStore} from '../acquisition';
+import {ScanResult} from './scan';
 
 type Result = {
     type: MarketType;
@@ -18,25 +18,28 @@ type Result = {
     q1: number;
     median: number;
     q3: number;
+    totalVolume: number;
     acquisitions: number;
     profit: number;
     score: number;
 }
 
 interface Props {
-    items?: TrackingResult[];
+    items?: ScanResult[];
     infoOnly?: boolean;
     ignoredColums?: string[] | string;
 }
 
 interface Emits {
     (e: 'buy', type: MarketType, buy: number, sell: number): void;
-    (e: 'remove', type: MarketType): void;
 }
 
 const scoreFormater = new Intl.NumberFormat("en-US", {
     maximumFractionDigits: 0
 });
+const volumeFormater = new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: 0
+});
 
 const props = withDefaults(defineProps<Props>(), {
     items: () => [],
@@ -45,11 +48,9 @@ const props = withDefaults(defineProps<Props>(), {
 });
 defineEmits<Emits>();
 
-const marketTaxStore = useMarketTaxStore();
 const acquiredTypesStore = useAcquiredTypesStore();
 
-const days = useStorage('market-tracking-days', 365);
-const threshold = useStorage('market-tracking-threshold', 10);
+const threshold = useStorage('market-scan-threshold', 10);
 const filter = ref("");
 const onlyCheap = ref(false);
 const columnsToIgnore = computed(() => {
@@ -63,9 +64,6 @@ const columnsToIgnore = computed(() => {
 const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() => props.items
     .filter(r => r.type.name.toLowerCase().includes(filter.value.toLowerCase()))
     .map(r => {
-        const quartils = getHistoryQuartils(r.history, days.value);
-        const profit = quartils.q1 === 0 ||  quartils.q3 === 0 ? 0 : marketTaxStore.calculateProfit(quartils.q1, quartils.q3);
-        const score = profit <= 0 ? 0 : Math.sqrt((Math.pow(quartils.totalVolume, 1.1) * Math.pow(quartils.q1, 1.2) *  Math.pow(profit, 0.5) * Math.pow(Math.max(1, r.orderCount), -0.7)) / days.value);
         const acquisitions = columnsToIgnore.value.includes('acquisitions') ? 0 : acquiredTypesStore.acquiredTypes
             .filter(t => t.type === r.type.id)
             .reduce((a, b) => a + b.remaining, 0);
@@ -76,12 +74,13 @@ const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() =>
             name: r.type.name,
             buy: r.buy,
             sell: r.sell,
-            q1: quartils.q1,
-            median: quartils.median,
-            q3: quartils.q3,
+            q1: r.q1,
+            median: r.median,
+            q3: r.q3,
+            totalVolume: r.totalVolume,
             acquisitions,
-            profit,
-            score
+            profit: r.profit,
+            score: r.score
         };
     }).filter(r => !onlyCheap.value || (r.buy <= r.q1 && r.profit >= (threshold.value / 100)))), {
         defaultSortKey: 'score',
@@ -105,15 +104,10 @@ const getLineColor = (result: Result) => {
 <template>
     <div v-if="!infoOnly" class="flex mb-2 mt-4">
         <div class="flex justify-self-end ms-auto">
-            <TaxInput />
             <div class="end">
                 <span>Profit Threshold: </span>
                 <input type="number" min="0" max="1000" step="1" v-model="threshold" />
             </div>
-            <div class="end">
-                <span>Days: </span>
-                <input type="number" min="1" max="365" step="1" v-model="days" />
-            </div>
             <div class="end flex">
                 <SliderCheckbox class="me-1" v-model="onlyCheap" /> Show only cheap items
             </div>
@@ -133,6 +127,7 @@ const getLineColor = (result: Result) => {
                     <SortableHeader v-bind="headerProps" sortKey="q1">Q1</SortableHeader>
                     <SortableHeader v-bind="headerProps" sortKey="median">Median</SortableHeader>
                     <SortableHeader v-bind="headerProps" sortKey="q3">Q3</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="totalVolume">Volume</SortableHeader>
                     <SortableHeader v-bind="headerProps" sortKey="profit">Profit</SortableHeader>
                     <SortableHeader v-bind="headerProps" sortKey="score">Score</SortableHeader>
                     <SortableHeader v-bind="headerProps" sortKey="acquisitions">Acquisitions</SortableHeader>
@@ -149,12 +144,12 @@ const getLineColor = (result: Result) => {
                     <td v-if="showColumn('q1')" class="text-right">{{ formatIsk(r.data.q1) }}</td>
                     <td v-if="showColumn('median')" class="text-right">{{ formatIsk(r.data.median) }}</td>
                     <td v-if="showColumn('q3')" class="text-right">{{ formatIsk(r.data.q3) }}</td>
+                    <td v-if="showColumn('totalVolume')" class="text-right">{{ volumeFormater.format(r.data.totalVolume) }}</td>
                     <td v-if="showColumn('profit')" class="text-right">{{ percentFormater.format(r.data.profit) }}</td>
                     <td v-if="showColumn('score')" class="text-right">{{ scoreFormater.format(r.data.score) }}</td>
                     <td v-if="showColumn('acquisitions')" class="text-right">{{ r.data.acquisitions }}</td>
                     <td v-if="showColumn('buttons')" class="text-right">
                         <button class="btn-icon me-1" title="Add acquisitions" @click="$emit('buy', r.data.type, r.data.buy, r.data.sell)"><ShoppingCartIcon /></button>
-                        <button class="btn-icon me-1" title="Untrack" @click="$emit('remove', r.data.type)"><BookmarkSlashIcon /></button>
                     </td>
                 </tr>
             </tbody>
@@ -168,8 +163,8 @@ const getLineColor = (result: Result) => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 div.end {
     @apply justify-self-end ms-2;
 }
-</style>../history/HistoryQuartils
+</style>

src/market/scan/index.ts

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

src/market/scan/scan.ts

@@ -0,0 +1,26 @@
+import { MarketType } from "@/market";
+import { MarketScanResponse } from "@/generated/mammon";
+
+export type ScanResult = {
+    type: MarketType;
+    buy: number;
+    sell: number;
+    q1: number;
+    median: number;
+    q3: number;
+    totalVolume: number;
+    profit: number;
+    score: number;
+}
+
+export const toScanResult = (res: MarketScanResponse, type: MarketType): ScanResult => ({
+    type,
+    buy: res.buy,
+    sell: res.sell,
+    q1: res.q1,
+    median: res.median,
+    q3: res.q3,
+    totalVolume: res.totalVolume,
+    profit: res.profit,
+    score: res.score,
+});

src/market/tax/TaxInput.vue

@@ -1,24 +1,23 @@
 <script setup lang="ts">
-import { storeToRefs } from "pinia";
-import { useMarketTaxStore } from "./tax";
+import {useMarketTaxStore} from "./tax";
 
-const { brokerFee, scc } = storeToRefs(useMarketTaxStore());
+const marketTaxStore = useMarketTaxStore();
 
 </script>
 
 <template>
     <div class="end">
         <span>Broker Fee: </span>
-        <input type="number" min="1" max="3" step="0.01" v-model="brokerFee" />
+        <input type="number" min="1" max="3" step="0.01" v-model="marketTaxStore.brokerFee" />
     </div>
     <div class="end">
         <span>SCC: </span>
-        <input type="number" min="3.6" max="8" step="0.01" v-model="scc" >
+        <input type="number" min="3.6" max="8" step="0.01" v-model="marketTaxStore.scc" >
     </div>
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 div.end {
     @apply justify-self-end ms-2;
 }

src/market/tracking/index.ts

@@ -1,4 +0,0 @@
-export * from './tracking';
-
-export { default as TrackingResultTable } from './TrackingResultTable.vue';
-

src/market/tracking/tracking.ts

@@ -1,40 +0,0 @@
-import { EsiMarketOrderHistory, getHistory, MarketType, MarketTypePrice } from "@/market";
-import log from "loglevel";
-import { defineStore } from "pinia";
-import { computed, ref } from "vue";
-
-export type TrackingResult = {
-    type: MarketType;
-    history: EsiMarketOrderHistory[];
-    buy: number,
-    sell: number,
-    orderCount: number,
-}
-
-const endpoint = '/api/types_tracking/';
-
-export const useMarketTrackingStore = defineStore('marketTracking', () => {
-    const trackedTypes = ref<any[]>([]); // TODO
-
-    const types = computed(() => trackedTypes.value.map(item => item.type) ?? []);
-    const addType = async (type: number) => {
-        const found = trackedTypes.value.find(item => item.type === type);
-
-        if (!found) {
-            log.info(`Tracking type ${type}`);
-        }
-    }
-    const removeType = async (type: number) => {
-        const found = trackedTypes.value.find(item => item.type === type);
-
-        if (!found) {
-            return;
-        }
-
-        trackedTypes.value = trackedTypes.value.filter(t => t.id !== found.id);
-    }
-
-    return { types, addType, removeType };
-});
-
-export const createResult = async (id: number, price: MarketTypePrice): Promise<TrackingResult> => ({ history: await getHistory(id), ...price });

src/market/type/MarketType.ts

@@ -1,45 +1,40 @@
-export type MarketType = {
-    id: number;
-    group_id: number;
-    marketgroup_id: number;
-    name: string;
-    published: boolean;
-    description: string;
-    basePrice: number;
-    icon_id: number;
-    volume: number;
-    portionSize: number;
-}
+import {marketApi} from '@/mammon/mammonService';
+import type {MarketTypeResponse} from '@/generated/mammon';
+
+export type MarketType = MarketTypeResponse;
+
+const cache = new Map<number, MarketType>(); // TODO move to pinia store
+
+const BATCH_SIZE = 100;
+
+const fetchTypes = async (ids: number[]): Promise<void> => {
+    const missing = ids.filter(id => !cache.has(id));
+    if (missing.length === 0) {
+        return;
+    }
+    const batches: Promise<MarketType[]>[] = [];
+    for (let i = 0; i < missing.length; i += BATCH_SIZE) {
+        batches.push(marketApi.findTypes(missing.slice(i, i + BATCH_SIZE)).then(r => r.data));
+    }
+    const results = await Promise.all(batches);
+    results.flat().forEach(t => cache.set(t.id, t));
+};
 
 export const getMarketType = async (type: string | number): Promise<MarketType> => (await getMarketTypes([type]))[0];
 export const getMarketTypes = async (types: (string | number)[]): Promise<MarketType[]> => {
     if (types.length === 0) {
         return [];
-    } else if (types.length === 1 && typeof types[0] === "number") {
-        return [];
     }
-    return []
+    const ids = types.filter((t): t is number => typeof t === 'number');
+    await fetchTypes(ids);
+    return ids.map(id => cache.get(id)).filter((t): t is MarketType => t !== undefined);
 }
 
-const blueprintMarketGrous = [ // TODO add all groups
-    2,
-    2157,
-    2159,
-    2339,
-    2160,
-    211,
-    1016,
-    339,
-    2290,
-    357,
-    1530,
-    359,
-    1531,
-    1532,
-    1533,
-    358
-]
-
 export const searchMarketTypes = async (search: string): Promise<MarketType[]> => {
-    return []
+    if (search.length === 0) {
+        return [];
+    }
+    const types = await marketApi.searchTypes(search).then(r => r.data);
+    types.forEach(t => cache.set(t.id, t));
+    return types;
 }

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 {
@@ -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,6 +1,9 @@
 <script setup lang="ts">
-import { ClipboardButton } from '@/components';
-import { InformationCircleIcon } from '@heroicons/vue/24/outline';
+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 {
@@ -9,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: 'market-types', 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/Characters.vue

@@ -1,11 +1,24 @@
 <script setup lang="ts">
+
+import {mammonAddCharacterUrl} from "@/mammon";
+import {CharacterLabel, useCharactersStore} from "@/characters";
+import {ArrowPathIcon} from '@heroicons/vue/24/outline';
+
+const charactersStore = useCharactersStore()
+
 const addCharacter = () => {
-    // TODO
+    window.location.replace(mammonAddCharacterUrl);
 }
 </script>
 
 <template>
     <div class="grid mb-2 mt-4">
-        <button class="justify-self-end" @click="addCharacter">Add chacarcter</button>
+      <div class="mb-4 border-b-1 flex justify-end">
+        <button class="mb-2" @click="addCharacter">Add chacarcter</button>
+      </div>
+      <div v-for="character in charactersStore.characters" :key="character.characterId" class="flex items-center mb-2">
+        <CharacterLabel class="grow" :character="character" />
+        <button class="btn-icon" @click="charactersStore.reloadActivities(character.characterId)"><ArrowPathIcon /></button>
+      </div>
     </div>
 </template>

src/pages/Ledger.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import {RouterView} from 'vue-router';
-import {CreateLedgerModal} from "@/ledger";
-import {ref} from "vue";
-
-const createLedgerModal = ref<typeof CreateLedgerModal>();
-</script>
-
-<template>
-    <div class="mt-4">
-      <div class="mb-4 border-b-1 flex justify-end">
-        <button class="mb-2" @click="createLedgerModal?.open()">New Ledger</button>
-      </div>
-      <CreateLedgerModal ref="createLedgerModal" />
-      <RouterView />
-    </div>
-</template>

src/pages/Ledgers.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import {RouterView} from 'vue-router';
+import {EditLedgerModal, useLedgersStore} from "@/ledger";
+import {ref} from "vue";
+import {activityApi, processingApi} from "@/mammon";
+
+const ledgersStore = useLedgersStore();
+
+const editLedgerModal = ref<typeof EditLedgerModal>();
+
+const processActivities = async () => {
+  await activityApi.fetchAllNewActivities();
+  await processingApi.processNewActivities();
+  await ledgersStore.refresh();
+}
+</script>
+
+<template>
+    <div class="mt-4">
+      <div class="mb-4 border-b-1 flex justify-end">
+        <button class="mb-2 ms-2" @click="processActivities">Process Activities</button>
+        <button class="mb-2 ms-2" @click="editLedgerModal?.open()">New Ledger</button>
+      </div>
+      <EditLedgerModal ref="editLedgerModal" />
+      <RouterView />
+    </div>
+</template>

src/pages/Market.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router';
-
+import {RouterLink, RouterView} from 'vue-router';
+import {routeNames} from '@/routes';
 </script>
 
 <template>
     <div class="mt-4">
         <div class="flex border-b-2 border-emerald-500">
-            <RouterLink :to="{name: 'market-types'}" class="tab">
+            <RouterLink :to="{name: routeNames.marketTypes}" class="tab">
                 <span>Item Info</span>
             </RouterLink>
-            <RouterLink to="/market/tracking" class="tab">
-                <span>Tracking</span>
+            <RouterLink to="/market/scan" class="tab">
+                <span>Scan</span>
             </RouterLink>
             <RouterLink to="/market/acquisitions" class="tab">
                 <span>Acquisitions</span>
@@ -18,15 +18,4 @@ import { RouterLink, RouterView } from 'vue-router';
         </div>
         <RouterView />
     </div>
-</template>
-
-<style scoped>
-@reference "tailwindcss";
-
-a.tab {
-    @apply flex items-center px-4 me-2 rounded-t-md bg-slate-600 hover:bg-slate-700;
-    &.router-link-active {
-        @apply bg-emerald-500 hover:bg-emerald-700;
-    }
-}
-</style>
+</template>

src/pages/Rules.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import {RouterLink, RouterView} from "vue-router";
+import {routeNames} from '@/routes';
+</script>
+
+<template>
+  <div class="mt-4">
+    <div class="flex border-b-2 border-emerald-500">
+      <RouterLink :to="{ name: routeNames.listRuleBooks }" class="tab">
+        <span>Rule Books</span>
+      </RouterLink>
+      <RouterLink to="/characters/rules" class="tab">
+        <span>Characters Rules</span>
+      </RouterLink>
+    </div>
+    <RouterView />
+  </div>
+</template>

src/pages/ledger/ListLedgerTransactions.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+
+import {findAllTransactionInLeger, useLedgerParam} from "@/ledger";
+import {computedAsync} from "@vueuse/core";
+import {TransactionResponse} from "@/generated/mammon";
+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 {ledgerId} = useLedgerParam();
+const charactersStore = useCharactersStore();
+
+const transactions = computedAsync<TransactionResponse[]>(async () => {
+  if (ledgerId.value) {
+    return await findAllTransactionInLeger(ledgerId.value);
+  }
+  return [];
+}, []);
+
+const { sortedArray, headerProps } = useSort(computedAsync(() => Promise.all(transactions.value.map(async transaction => {
+  const character = await charactersStore.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' });
+
+const getIskBalance = (transaction: TransactionResponse) => {
+  if (!ledgerId.value) {
+    return 0;
+  }
+
+  let balance = 0;
+
+  for (const transfer of transaction.transfers) {
+    if (transfer.type === TransferTypes.Isk) {
+      if (transfer.toLedgerId === ledgerId.value) {
+        balance += transfer.amount;
+      } else if (transfer.fromLedgerId === ledgerId.value) {
+        balance -= transfer.amount;
+      }
+    }
+  }
+  return balance;
+}
+</script>
+
+<template>
+  <div class="mt-4">
+    <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,57 @@
 <script setup lang="ts">
 
-import {LedgerLine, useLedgersStore} from "@/ledger";
+import {EditLedgerModal, Ledger, LedgerLabel, useLedgersStore} from "@/ledger";
+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} = useLedgersStore();
+const ledgersStore = useLedgersStore();
+
+const { sortedArray, headerProps } = useSort<Ledger>(() => ledgersStore.ledgers);
+
+const editModal = ref<typeof EditLedgerModal>();
+const editingLedgerId = ref("");
+
+const openEdit = async (ledgerId: string) => {
+  editingLedgerId.value = ledgerId;
+  await nextTick();
+  editModal.value?.open();
+};
 
 </script>
 
 <template>
   <div class="mt-4">
-    <LedgerLine v-for="leger in ledgers" :ledger="leger"/>
+    <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>
-</template>
+  <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/Scan.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import {getMarketTypes, TaxInput, useMarketTaxStore} from "@/market";
+import {BuyModal} from '@/market/acquisition';
+import {ScanResult, ScanResultTable, toScanResult} from '@/market/scan';
+import {marketApi} from "@/mammon";
+import {useStorage} from "@vueuse/core";
+import {ref, watch} from 'vue';
+
+const buyModal = ref<typeof BuyModal>();
+
+const marketTaxStore = useMarketTaxStore();
+const days = useStorage('market-scan-days', 365);
+const items = ref<ScanResult[]>([]);
+const loading = ref(false);
+
+const scan = async () => {
+    loading.value = true;
+    try {
+        const { data } = await marketApi.scanMarket(
+            days.value,
+            marketTaxStore.brokerFee / 100,
+            marketTaxStore.scc / 100
+        );
+        const types = await getMarketTypes(data.map(r => r.marketTypeId));
+
+        items.value = data.flatMap(r => {
+            const type = types.find(t => t.id === r.marketTypeId);
+
+            return type ? [toScanResult(r, type)] : [];
+        });
+    } finally {
+        loading.value = false;
+    }
+}
+
+watch([days, () => marketTaxStore.brokerFee, () => marketTaxStore.scc], scan, { immediate: true });
+</script>
+
+<template>
+    <div class="flex mb-2 mt-4">
+        <div class="flex justify-self-end ms-auto">
+            <TaxInput />
+            <div class="end">
+                <span>Days: </span>
+                <input type="number" min="1" max="365" step="1" v-model="days" />
+            </div>
+        </div>
+    </div>
+    <hr />
+    <div v-if="loading" class="text-center mt-4">
+        <span>Scanning market…</span>
+    </div>
+    <template v-else>
+        <ScanResultTable :items="items" @buy="(type, buy, sell) => buyModal?.open(type, { 'Buy': buy, 'Sell': sell })" />
+        <BuyModal ref="buyModal" />
+    </template>
+</template>
+
+<style scoped>
+@reference "@/style.css";
+div.end {
+    @apply justify-self-end ms-2;
+}
+</style>

src/pages/market/Tracking.vue

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import { Modal, ProgressBar } from "@/components";
-import { MarketType, MarketTypeInput, MarketTypePrice, getHistory, getMarketTypes, useApraisalStore } from "@/market";
-import { BuyModal } from '@/market/acquisition';
-import { TrackingResult, TrackingResultTable, createResult, useMarketTrackingStore } from '@/market/tracking';
-import { ref, watch } from 'vue';
-
-
-const buyModal = ref<typeof BuyModal>();
-
-const item = ref<MarketType>();
-
-const apraisalStore = useApraisalStore();
-const marketTrackingStore = useMarketTrackingStore();
-const items = ref<TrackingResult[]>([]);
-const addOrRelaod = async (type: MarketType) => {
-    const typeID = type.id;
-    const [history, price] = await Promise.all([
-        getHistory(typeID),
-        apraisalStore.getPrice(type)
-    ]);
-    const itm = {
-        type,
-        history,
-        buy: price.buy,
-        sell: price.sell,
-        orderCount: price.orderCount
-    };
-
-    if (items.value.some(i => i.type.id === typeID)) {
-        items.value = items.value.map(i => i.type.id === typeID ? itm : i);
-    } else {
-        items.value = [ ...items.value, itm];
-        marketTrackingStore.addType(typeID);
-    }
-}
-const addItem = async () => {
-    if (!item.value) {
-        // TODO error
-        return;
-    }
-
-    addOrRelaod(item.value);
-    item.value = undefined;
-}
-const removeItem = (type: MarketType) => {
-    items.value = items.value.filter(i => i.type.id !== type.id);
-    marketTrackingStore.removeType(type.id);
-}
-
-watch(() => marketTrackingStore.types, async t => {
-    const typesToLoad = t.filter(t => !items.value.some(i => i.type.id === t));
-
-    if (typesToLoad.length === 0) {
-        return;
-    }
-
-    const prices = await apraisalStore.getPrices(await getMarketTypes(typesToLoad));
-
-    typesToLoad.forEach(async i => items.value.push(await createResult(i, prices.find(p => p.type.id === i) as MarketTypePrice)));
-}, { immediate: true });
-</script>
-
-<template>
-    <div class="grid mb-2 mt-4">
-        <div class="w-auto flex">
-            <span>Item: </span>
-            <MarketTypeInput class="ms-2" v-model="item" @submit="addItem"/>
-            <button class="justify-self-end ms-2" @click="addItem">Add</button>
-        </div>
-    </div>
-    <template v-if="items.length > 0">
-        <hr />
-        <TrackingResultTable :items="items" @buy="(type, buy, sell) => buyModal?.open(type, { 'Buy': buy, 'Sell': sell })" @remove="removeItem" />
-        <BuyModal ref="buyModal" />
-        <Modal :open="items.length > 0 && items.length < marketTrackingStore.types.length">
-            <div class="ms-auto me-auto mb-2 w-96">
-                <ProgressBar :value="items.length" :total="marketTrackingStore.types.length" />
-            </div>
-        </Modal>
-    </template>
-</template>

src/pages/market/TypeInfo.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { ClipboardButton } from '@/components';
-import { MarketType, MarketTypeInput, getMarketType, useApraisalStore } from "@/market";
-import { AcquisitionResultTable, BuyModal, useAcquiredTypesStore } from '@/market/acquisition';
-import { TrackingResultTable, createResult, useMarketTrackingStore } from '@/market/tracking';
-import { BookmarkIcon, BookmarkSlashIcon, ShoppingCartIcon } from '@heroicons/vue/24/outline';
-import { computedAsync } from '@vueuse/core/index.cjs';
+import {ClipboardButton} from '@/components';
+import {getMarketType, MarketType, MarketTypeInput, useApraisalStore, useMarketTaxStore} from "@/market";
+import {AcquisitionResultTable, BuyModal, useAcquiredTypesStore} from '@/market/acquisition';
+import {ScanResultTable, toScanResult} from '@/market/scan';
+import {marketApi} from "@/mammon";
+import {ShoppingCartIcon} from '@heroicons/vue/24/outline';
 import log from "loglevel";
-import { computed, ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import {computed, ref, watch} from "vue";
+import {useRoute, useRouter} from "vue-router";
+import {routeNames} from "@/routes";
+import {computedAsync, useStorage} from "@vueuse/core";
 
 const buyModal = ref<typeof BuyModal>();
 
@@ -17,12 +19,25 @@ const item = ref<MarketType>();
 const inputItem = ref<MarketType>();
 
 const apraisalStore = useApraisalStore();
+const marketTaxStore = useMarketTaxStore();
+const days = useStorage('market-scan-days', 365);
 const price = computedAsync(() => item.value ? apraisalStore.getPrice(item.value) : undefined);
-const marketTrackingStore = useMarketTrackingStore();
-const result = computedAsync(async () => item.value && price.value ? await createResult(item.value?.id, price.value) : undefined);
+const result = computedAsync(async () => {
+    if (!item.value) {
+        return undefined;
+    }
+
+    const { data } = await marketApi.scanMarketType(
+        item.value.id,
+        days.value,
+        marketTaxStore.brokerFee / 100,
+        marketTaxStore.scc / 100
+    );
+
+    return toScanResult(data, item.value);
+});
 const acquiredTypesStore = useAcquiredTypesStore();
 
-const isTracked = computed(() => item.value ? marketTrackingStore.types.includes(item.value.id) : false);
 const acquisitions = computed(() => {
     const p = price.value;
     
@@ -35,24 +50,13 @@ const acquisitions = computed(() => {
             sell: p.sell
         }));
 });
-const toogleTracking = () => {
-    if (!item.value) {
-        return;
-    }
-    if (isTracked.value) {
-        marketTrackingStore.removeType(item.value.id);
-    } else {
-        marketTrackingStore.addType(item.value.id);
-    }
-}
-
 const view = () => {
     if (!inputItem.value) {
         return;
     }
 
     router.push({
-        name: 'market-types',
+        name: routeNames.marketTypes,
         params: {
             type: inputItem.value.id
         }
@@ -92,10 +96,6 @@ watch(useRoute(), async route => {
                     <div class="ms-auto">
                         <ClipboardButton class="ms-1" :value="item.name" />
                         <button v-if="price" class="btn-icon ms-1" title="Add acquisitions" @click="buyModal?.open(item, { 'Buy': price.buy, 'Sell': price.sell })"><ShoppingCartIcon /></button>
-                        <button class="btn-icon ms-1" :title="isTracked ? 'Untrack' : 'Track'" @click="toogleTracking">
-                            <BookmarkSlashIcon v-if="isTracked" />
-                            <BookmarkIcon v-else />
-                        </button>
                     </div>
                 </div>
                 <p v-if="item.description" class="text-sm">{{ item.description }}</p>
@@ -103,7 +103,7 @@ watch(useRoute(), async route => {
         </div>
         <div v-if="result" class="mb-4">
             <span>Market Info:</span>
-            <TrackingResultTable :items="[result]" infoOnly :ignoredColums="['name', 'acquisitions']" />
+            <ScanResultTable :items="[result]" infoOnly :ignoredColums="['name', 'acquisitions']" />
         </div>
         <div v-if="acquisitions && acquisitions.length > 0">
             <span>Acquisitions:</span>
@@ -114,7 +114,8 @@ watch(useRoute(), async route => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
+
 img.type-image {
     width: 64px;
     height: 64px;

src/pages/rules/EditCharacterRuleBook.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import {Character, CharacterLabel, useCharactersStore} from "@/characters";
+import {useRoute} from "vue-router";
+import {computed, ref, watch, watchEffect} from "vue";
+import log from "loglevel";
+import {
+  RuleBook,
+  useCharacterRuleBooksStore,
+  useRuleBooksStore
+} from "@/rules";
+import {isMain, Ledger, LedgerSelect, systemLedger, useLedgersStore} from "@/ledger";
+
+type Bindings = { [key: string]: Ledger; };
+
+const ruleBookStore = useRuleBooksStore();
+const characterRuleBooksStore = useCharacterRuleBooksStore();
+const charactersStore = useCharactersStore();
+const ledgersStore = useLedgersStore();
+
+const ledgersToUse = computed(() => [systemLedger, ...ledgersStore.ledgers.filter(isMain)]);
+
+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;
+
+  if (characterId) {
+    const characterRuleBook = characterRuleBooksStore.findByCharacterId(characterId);
+
+    ruleBook.value = ruleBookStore.findById(characterRuleBook?.ruleBook.ruleBookId ?? '');
+    bindings.value = Object.fromEntries(
+      Object.entries(characterRuleBook?.bindings ?? {})
+        .map(([key, id]) => [key, ledgersToUse.value.find(l => l.ledgerId === id) ?? systemLedger])
+    );
+  }
+});
+
+const save = () => {
+  const characterId = character.value?.characterId;
+  const ruleBookId = ruleBook.value?.ruleBookId;
+
+  if (characterId && ruleBookId) {
+    characterRuleBooksStore.setForCharacter(characterId, {
+      ruleBookId,
+      bindings: Object.fromEntries(
+        Object.entries(bindings.value)
+          .map(([key, ledger]) => [key, ledger.ledgerId])
+      )
+    })
+  }
+}
+
+watch(useRoute(), async route => {
+  if (route.params.characterId) {
+    const id = parseInt(typeof route.params.characterId === 'string' ? route.params.characterId : route.params.characterId[0]);
+
+    character.value = await charactersStore.findById(id);
+    log.info('Loaded character:', character.value);
+  } else {
+    character.value = undefined;
+    log.info('No character to load');
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <div v-if="character" class="grid mb-2 mt-4">
+    <div class="mb-2 border-b-1 flex">
+      <CharacterLabel class="flex grow mb-2" :character="character" :size="64" />
+      <div>
+        <button @click="save">Save</button>
+      </div>
+    </div>
+    <div class="flex-col border-b-1">
+      Rule Book:
+      <select class="me-2 mb-2 w-50" v-model="ruleBook">
+        <option v-for="rb in ruleBookStore.ruleBooks" :key="rb.ruleBookId" :value="rb">{{ rb.name }}</option>
+      </select>
+    </div>
+    <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 ledgerRefs" :ref="ref">
+          <span class="me-1">{{ref}}:</span>
+          <LedgerSelect :ledgers="ledgersToUse" :modelValue="bindings[ref] ?? systemLedger" @update:modelValue="value => { if (value) bindings[ref] = value }" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

src/pages/rules/EditRuleBook.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import {useRoute, useRouter} from "vue-router";
+import {ref, watch} from "vue";
+import {useDebounceFn, useEventListener} from "@vueuse/core";
+import log from "loglevel";
+import {ScriptEditor, useRuleBooksStore} from "@/rules";
+import {PlusIcon, TrashIcon} from "@heroicons/vue/24/outline";
+import {routeNames} from "@/routes";
+import {SliderCheckbox} from "@/components";
+
+const ruleBookId = ref<string>();
+const name = ref<string>('');
+const usedForAcquisitions = ref<boolean>(false);
+const ledgerRefs = ref<string[]>([]);
+const script = ref<string>('');
+
+const ruleBooksStore = useRuleBooksStore();
+const router = useRouter();
+
+const save = async () => {
+  if (!ruleBookId.value) {
+    const created = await ruleBooksStore.create({
+      name: name.value,
+      usedForAcquisitions: usedForAcquisitions.value,
+      ledgerRefs: ledgerRefs.value,
+      script: script.value
+    })
+    await router.push({ name: routeNames.editRuleBook, params: {ruleBookId: created.ruleBookId}})
+
+  } else {
+    await ruleBooksStore.update(ruleBookId.value, {
+      name: name.value,
+      usedForAcquisitions: usedForAcquisitions.value,
+      ledgerRefs: ledgerRefs.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, '']
+}
+const updateLedgerRef = useDebounceFn((index: number, value: string) => {
+  ledgerRefs.value[index] = value;
+}, 500);
+
+const removeLedgerRef = (index: number) => {
+  ledgerRefs.value = ledgerRefs.value.toSpliced(index, 1)
+}
+
+watch(useRoute(), async route => {
+  if (route.params.ruleBookId) {
+    const promise = ruleBooksStore.refresh(); // FIXME don't call refresh
+
+    const id = typeof route.params.ruleBookId === 'string' ? route.params.ruleBookId : route.params.ruleBookId[0];
+
+    await promise;
+
+    const ruleBook = ruleBooksStore.findById(id);
+
+    ruleBookId.value = id;
+    name.value = ruleBook?.name ?? '';
+    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 = [];
+    script.value = '';
+    log.info('No rule book to load');
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <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 mt-2">
+          <div class="flex items-center mb-2" v-for="(ledgerRef, index) in ledgerRefs" :key="index">
+            <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="addLedgerRef"><PlusIcon /></button>
+          </div>
+        </div>
+      </div>
+      <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">
+      <div>
+        <button @click="save">Save</button>
+      </div>
+    </div>
+  </div>
+</template>

src/pages/rules/ListCharacterRuleBooks.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import {Character, CharacterLabel} from "@/characters";
+import {PencilSquareIcon} from "@heroicons/vue/24/outline";
+import {CharacterRuleBook, useCharacterRuleBooksStore} from "@/rules";
+import {routeNames} from "@/routes.ts";
+import {SortableHeader, useSort} from "@/components/table";
+
+type CharacterRuleBookView = {
+  character: Character;
+  characterName: string;
+  ruleBookName: string;
+}
+
+const characterRuleBooksStore = useCharacterRuleBooksStore();
+
+const { sortedArray, headerProps } = useSort<CharacterRuleBookView>(() => characterRuleBooksStore.characterRuleBooks.map((characterRuleBook: CharacterRuleBook): CharacterRuleBookView => ({
+  character: characterRuleBook.character,
+  characterName: characterRuleBook.character.name,
+  ruleBookName: characterRuleBook.ruleBook.name
+})))
+</script>
+
+<template>
+  <div class="grid mb-2 mt-4">
+    <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.character.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.character.characterId } }"><PencilSquareIcon /></RouterLink>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

src/pages/rules/ListRuleBooks.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import {DocumentDuplicateIcon, PencilSquareIcon, TrashIcon} from "@heroicons/vue/24/outline";
+import {confirm} from "@/confirm";
+import {RuleBook, useRuleBooksStore} from "@/rules";
+import {routeNames} from "@/routes";
+
+const ruleBooksStore = useRuleBooksStore();
+
+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>
+
+<template>
+  <div class="grid mb-2 mt-4">
+    <div class="flex justify-end border-b-1">
+      <RouterLink class="button mb-2 ms-2" :to="{ name: routeNames.newRuleBook}">New Rule Book</RouterLink>
+    </div>
+    <div v-for="ruleBook in ruleBooksStore.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 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

@@ -1,17 +1,49 @@
 import {RouteRecordRaw} from 'vue-router';
 
-export const routes: RouteRecordRaw[] = [
-    {path: '/', name: 'home', component: () => import('@/pages/Index.vue')},
-    {path: '/callback', name: 'callback', component: () => import('@/pages/Index.vue')},
+export const routeNames = {
+    home: 'home',
+    callback: 'callback',
+    viewLedger: 'view-ledger',
+    viewLedgerBalance: 'view-ledger-balance',
+    listLedgerTransactions: 'list-ledger-transactions',
+    listRuleBooks: 'list-rule-books',
+    newRuleBook: 'new-rule-book',
+    editRuleBook: 'edit-rule-book',
+    editCharacterRulebook: 'edit-character-rule-book',
+    marketTypes: 'market-types',
+    about: 'about',
+} as const;
 
-    {path: '/ledgers', component: () => import('@/pages/Ledger.vue'), children: [
-        {path: '', component: () => import('./pages/ledger/ListLedgers.vue')},
+export const routes: RouteRecordRaw[] = [
+    {path: '/', name: routeNames.home, component: () => import('@/pages/Index.vue')},
+    {path: '/callback', name: routeNames.callback, component: () => import('@/pages/Index.vue')},
+
+    {path: '/ledgers', component: () => import('@/pages/Ledgers.vue'), children: [
+        {path: '', component: () => import('@/pages/ledger/ListLedgers.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: {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')},
+            {path: ':ruleBookId', name: routeNames.editRuleBook, component: () => import('@/pages/rules/EditRuleBook.vue')},
+        ]},
+        {path: '/characters/rules', children: [
+            {path: '', component: () => import('@/pages/rules/ListCharacterRuleBooks.vue')},
+            {path: '/characters/:characterId/rules', name: routeNames.editCharacterRulebook, component: () => import('@/pages/rules/EditCharacterRuleBook.vue')},
+        ]}
     ]},
 
     {path: '/market', component: () => import('@/pages/Market.vue'), children: [
-        {path: '', redirect: '/market/types'},
-        {path: 'types/:type?', name: 'market-types', component: () => import('@/pages/market/TypeInfo.vue')},
-        {path: 'tracking', component: () => import('@/pages/market/Tracking.vue')},
+        {path: '', redirect: {name: routeNames.marketTypes}},
+        {path: 'types/:type?', name: routeNames.marketTypes, component: () => import('@/pages/market/TypeInfo.vue')},
+        {path: 'scan', component: () => import('@/pages/market/Scan.vue')},
         {path: 'acquisitions', component: () => import('@/pages/market/Acquisitions.vue')},
     ]},
 
@@ -20,5 +52,5 @@ export const routes: RouteRecordRaw[] = [
     {path: '/tools', component: () => import('@/pages/Tools.vue')},
 
     {path: '/characters', component: () => import('@/pages/Characters.vue')},
-    {path: '/about', name: 'about', component: () => import('@/pages/About.vue')},
-];
+    {path: '/about', name: routeNames.about, component: () => import('@/pages/About.vue')},
+] as const;

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

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

src/rules/rules.ts

@@ -0,0 +1,83 @@
+import {characterRuleBookApi, ruleBookApi} from "@/mammon";
+import {
+    CharacterRuleBookResponse,
+    CreateRuleBookRequest,
+    RuleBookResponse,
+    SetCharacterRuleBookRequest
+} from "@/generated/mammon";
+import {defineStore} from "pinia";
+import {ref, triggerRef} from "vue";
+
+export type RuleBook = RuleBookResponse;
+
+export const useRuleBooksStore = defineStore('rule-books', () => {
+    const ruleBooks = ref<RuleBook[]>([]);
+
+    const addRuleBook = (ruleBook: RuleBook) => {
+        ruleBooks.value.push(ruleBook);
+        triggerRef(ruleBooks);
+        return ruleBook;
+    };
+
+    const replaceRuleBook = (ruleBook: RuleBook) => {
+        const index = ruleBooks.value.findIndex(rb => rb.ruleBookId === ruleBook.ruleBookId);
+
+        if (index !== -1) {
+            ruleBooks.value[index] = ruleBook;
+        }
+        triggerRef(ruleBooks);
+        return ruleBook;
+    };
+
+    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 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, duplicate, remove, refresh};
+})
+
+export type CharacterRuleBook = CharacterRuleBookResponse;
+
+export const useCharacterRuleBooksStore = defineStore('character-rule-books', () => {
+    const characterRuleBooks = ref<CharacterRuleBook[]>([]);
+
+    const replaceCharacterRuleBook = (characterRuleBook: CharacterRuleBook) => {
+        const index = characterRuleBooks.value.findIndex(crb => crb.character.characterId === characterRuleBook.character.characterId);
+
+        if (index !== -1) {
+            characterRuleBooks.value[index] = characterRuleBook;
+        } else {
+            characterRuleBooks.value.push(characterRuleBook);
+        }
+        triggerRef(characterRuleBooks);
+        return characterRuleBook;
+    };
+
+    const findByCharacterId = (characterId: number): CharacterRuleBook | undefined => characterRuleBooks.value.find(crb => crb.character.characterId === characterId);
+
+    const setForCharacter = (characterId: number, ruleBook: SetCharacterRuleBookRequest) => characterRuleBookApi.setCharacterRuleBookForCharacter(characterId, ruleBook)
+        .then(response => replaceCharacterRuleBook(response.data));
+
+    const refresh = () => characterRuleBookApi.findAllCharacterRuleBooks().then(response => characterRuleBooks.value = response.data);
+
+    refresh();
+
+    return {characterRuleBooks, findByCharacterId, setForCharacter, refresh};
+})
+
+export const fetchScriptDefinitions = (): Promise<string> =>
+    ruleBookApi.getScriptDefinitions({responseType: 'text'}).then(response => response.data);

src/service.ts

@@ -1,5 +1,4 @@
-import axios, { AxiosInstance } from 'axios';
-import rateLimit from 'axios-rate-limit';
+import { AxiosInstance } from 'axios';
 import log from 'loglevel';
 
 export const logResource = (a: AxiosInstance) => {
@@ -14,12 +13,3 @@ export const logResource = (a: AxiosInstance) => {
         return Promise.reject(e);
     });
 }
-
-export const esiAxiosInstance = rateLimit(axios.create({
-    baseURL: import.meta.env.VITE_ESI_URL,
-    headers: {
-        'Accept': 'application/json',
-        "Content-Type": "application/json"
-    },
-}), { maxRPS: 10 })
-logResource(esiAxiosInstance)

src/sidebar/Sidebar.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import {Dropdown} from '@/components';
 import {RouterLink} from 'vue-router';
+import {routeNames} from '@/routes';
 
 const links = [
-  {name: "Ledger", path: "/ledgers"},
   {name: "Market", path: "/market"},
+  {name: "Ledger", path: "/ledgers"},
+  {name: "Rules", path: "/rules"},
   {name: "Reprocess", path: "/reprocess"},
   {name: "Tools", path: "/tools"}
 ];
@@ -27,7 +29,7 @@ const logout = async () => {
               <RouterLink class="sidebar-button py-0.5 px-2" to="/characters">Characters</RouterLink>
             </li>
             <li>
-              <RouterLink class="sidebar-button py-0.5 px-2" :to="{name: 'about'}">About EVE Online</RouterLink>
+              <RouterLink class="sidebar-button py-0.5 px-2" :to="{name: routeNames.about}">About EVE Online</RouterLink>
             </li>
             <li>
               <a class="sidebar-button py-0.5 px-2 text-amber-700" @click="logout">Logout</a>
@@ -47,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;
@@ -59,21 +61,13 @@ const logout = async () => {
 
 .user-dropdown {
   @apply w-full;
+}
 
-  :deep(>div) {
-    @apply w-full;
+.user-dropdown :deep(>button) {
+  @apply bg-slate-700 hover:bg-slate-800 border-none flex items-center w-full;
+}
 
-    > div {
-      @apply w-full bg-slate-800;
-    }
-  }
-
-  :deep(>button) {
-    @apply bg-slate-700 hover:bg-slate-800 border-none flex items-center w-full;
-  }
-
-  &.dropdown-open:deep(>button) {
-    @apply bg-slate-800 rounded-b-none;
-  }
+.user-dropdown.dropdown-open :deep(>button) {
+  @apply bg-slate-800 rounded-b-none;
 }
 </style>

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;
@@ -14,9 +20,12 @@
     button, a.button {
         @apply py-0.5 px-2 border rounded bg-slate-600 hover:bg-slate-700;
     }
-    input {
+    input, select {
         @apply border bg-slate-500 rounded px-1;
     }
+    option {
+        @apply bg-slate-500;
+    }
     textarea {
         @apply border rounded bg-slate-500 w-full;
     }
@@ -69,9 +78,14 @@
     }
 
     .btn-icon {
-        @apply p-0 border-none bg-transparent hover:text-slate-400 hover:bg-transparent;
-        > svg {
-            @apply w-6 h-6;
+        @apply btn-icon;
+    }
+
+    a.tab {
+        @apply flex items-center px-4 me-2 rounded-t-md bg-slate-600 hover:bg-slate-700;
+
+        &.router-link-active {
+            @apply bg-emerald-500 hover:bg-emerald-700;
         }
     }
 }

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 ledgersStore = useLedgersStore();
+
+const sortedArray = computedAsync(async () => {
+  if (!props.transfers) {
+    return [];
+  }
+
+  return (await Promise.all(props.transfers.map(async (transfer: TransferWithValue, index) => {
+    const fromLedger = ledgersStore.findById(transfer.fromLedgerId) ?? systemLedger
+    const toLedger = ledgersStore.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'];

src/utils.ts

@@ -1 +1 @@
-export const copyToClipboard = (s: string) => navigator.clipboard.writeText(s);
+export const copyToClipboard = (s: string) => navigator.clipboard.writeText(s);