ledger list and modal

.gitignore

@@ -23,3 +23,5 @@ docker-compose.yml
 *.njsproj
 *.sln
 *.sw?
+
+generated/mammon/

package.json

@@ -11,28 +11,27 @@
   },
   "dependencies": {
     "@heroicons/vue": "^2.0.18",
-    "@vueuse/components": "^10.5.0",
+    "@vueuse/components": "^14.3.0",
-    "@vueuse/core": "^10.2.1",
+    "@vueuse/core": "^14.3.0",
-    "@vueuse/integrations": "^10.2.1",
+    "@vueuse/integrations": "^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",
-    "oidc-client-ts": "^3.0.1",
+    "pinia": "^3.0.4",
-    "pinia": "^2.1.6",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.4"
+    "vue-router": "^5.0.7"
   },
   "devDependencies": {
-    "@types/node": "^20.4.5",
+    "@types/node": "^25.8.0",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue": "^6.0.7",
-    "autoprefixer": "^10.4.14",
+    "tailwindcss": "^4.3.0",
-    "postcss": "^8.4.27",
+    "typescript": "^6.0.3",
-    "tailwindcss": "^3.3.3",
+    "@tailwindcss/vite": "^4.3.0",
-    "typescript": "^5.0.2",
+    "vite": "^8.0.13",
-    "vite": "^5.2.11",
+    "vite-plugin-runtime-env": "^1.0.0",
-    "vite-plugin-runtime-env": "^0.1.1",
+    "vitest": "^4.1.6",
-    "vitest": "^1.6.0",
+    "vue-tsc": "^3.2.9"
-    "vue-tsc": "^2.0.18"
   }
 }

postcss.config.js

@@ -1,8 +0,0 @@
-export default {
-  plugins: {
-    'postcss-import': {},
-    'tailwindcss/nesting': {},
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

src/App.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import { useAuthStore } from '@/auth';
 import { computed } from 'vue';
 import { RouterView, useRoute } from 'vue-router';
 import { Sidebar } from './sidebar';
 
 const route = useRoute();
-const authStore = useAuthStore();
 
 const hideSidebar = computed(() => {
-    return !authStore.isLoggedIn || route.name === 'callback' || route.name === 'about';
+    return route.name === 'callback' || route.name === 'about';
 });
 </script>
 
@@ -24,7 +22,9 @@ const hideSidebar = computed(() => {
     </template>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
+
 div.main-container {
     @apply px-4 sm:ml-64;
 }

src/auth.ts

@@ -1,49 +0,0 @@
-import log from "loglevel";
-import { Log, User, UserManager, WebStorageStateStore } from "oidc-client-ts";
-import { defineStore } from "pinia";
-import { computed, ref } from "vue";
-
-Log.setLogger(log);
-
-export const useAuthStore = defineStore('auth', () => {
-    const userManager = new UserManager({
-        authority: import.meta.env.VITE_AUTH_AUTHORITY,
-        client_id: import.meta.env.VITE_AUTH_CLIENT_ID,
-        client_secret: import.meta.env.VITE_AUTH_CLIENT_SECRET,
-        redirect_uri: import.meta.env.VITE_AUTH_REDIRECT_URI,
-        scope: import.meta.env.VITE_AUTH_SCOPE,
-        stateStore: new WebStorageStateStore({ store: window.localStorage }),
-        userStore: new WebStorageStateStore({ store: window.localStorage })
-    });
-
-    const user = ref<User>();
-    const isLoggedIn = computed(() => !!user.value);
-    const accessToken = computed(() => user.value?.access_token);
-    const username = computed(() => user.value?.profile.name ?? "");
-    const userId = computed(() => user.value?.profile.sub ?? "");
-
-    const redirect = async () => {
-        await userManager.signinRedirect();
-        log.info("Redirecting to login page");
-    }
-    const login = async () => {
-        await userManager.signinCallback();
-        log.debug("Logged in");
-    }
-    const logout = async () => {
-        await userManager.signoutRedirect();
-        log.debug("Logged out");
-    }
-
-    const setUser = (u?: User | null) => {
-        if (u) {
-            user.value = u;
-            log.debug("User loaded", u.profile.name);
-        } else {
-            user.value = undefined;
-        }
-    }
-    userManager.events.addUserLoaded(setUser);
-    userManager.getUser().then(setUser);
-    return { redirect, login, logout, isLoggedIn, accessToken, username, userId };
-});

src/components/Dropdown.vue

@@ -17,13 +17,21 @@ useEventListener('keyup', e => {
     <div class="dropdown" :class="{'dropdown-open': isOpen, 'dropdown-close': !isOpen}" v-on-click-outside="() => isOpen = false">
         <button @click="isOpen = !isOpen">
             <slot name="button" />
-            <Transition name="flip">
+            <Transition
+                enter-active-class="transition-transform"
+                enter-from-class="rotate-180"
+                leave-active-class="hidden"
+                leave-to-class="rotate-180">
                 <ChevronDownIcon v-if="!isOpen" class="chevron" />
                 <ChevronUpIcon v-else class="chevron" />
             </Transition>
         </button>
 
-        <Transition name="fade">
+        <Transition
+            enter-active-class="transition-opacity"
+            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 />
@@ -33,27 +41,10 @@ useEventListener('keyup', e => {
     </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
+
 .chevron {
     @apply w-4 h-4 ms-1;
 }
-
-.fade-enter-from, .fade-leave-to {
-  opacity: 0;
-}
-
-.fade-enter-active, .fade-leave-active {
-    @apply transition-opacity;
-}
-
-.flip-enter-from, .flip-leave-to {
-  transform: rotate(180deg);
-}
-
-.flip-enter-active {
-  @apply transition-transform;
-}
-.flip-leave-active {
-   display: none; 
-}
 </style>

src/components/Modal.vue

@@ -34,7 +34,8 @@ useEventListener('keyup', e => {
     </Transition>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
 .fade-enter-from, .fade-leave-to {
     @apply opacity-0;
 }

src/components/ProgressBar.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+
+interface Props {
+    value: number;
+    total: number;
+}
+
+const props = defineProps<Props>();
+
+const percentage = computed(() => (props.value / props.total) * 100);
+</script>
+
+<template>
+    <div class="w-full bg-gray-600 rounded-full h-2.5">
+        <div class="bg-emerald-600 h-2.5 rounded-full" :style="{ width: percentage + '%'}" />
+    </div>
+</template>

src/components/SliderCheckbox.vue

@@ -10,7 +10,8 @@ const modelValue = defineModel({ default: false });
     </label>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
     input:checked ~ span:last-child {
         --tw-translate-x: 1.25rem;
     }

src/components/index.ts

@@ -2,6 +2,7 @@ export { default as ClipboardButton } from './ClipboardButton.vue';
 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 SliderCheckbox } from './SliderCheckbox.vue';
 export { default as Tooltip } from './tooltip/Tooltip.vue';
 

src/components/table/SortableHeader.vue

@@ -32,7 +32,8 @@ const emit = defineEmits<Emit>();
     </component>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
 .sort-header {
     @apply relative h-8 pe-3;
 }

src/components/table/VirtualScrollTable.vue

@@ -6,7 +6,8 @@ interface Props {
     list?: any[];
     itemHeight: number;
     headerHeight?: number;
-    bottom?: string;
+    footerHeight?: number;
+    bottom?: string; // FIXME: use css variable
 }
 
 
@@ -35,11 +36,16 @@ const computedHeaderHeight = computed(() => {
     
     return h + 'px';
 })
+const computedFooterHeight = computed(() => {
+    const h = props.footerHeight ?? 0;
+    
+    return h + 'px';
+})
 const computedWrapperProps = computed(() => ({
     ...wrapperProps.value,
     style: {
         ...wrapperProps.value.style,
-        height: `calc(${wrapperProps.value.style.height} + ${computedHeaderHeight.value} + 1px)`
+        height: `calc(${wrapperProps.value.style.height} + ${computedHeaderHeight.value} + ${computedFooterHeight.value} + 1px)`
     }
 }))
 const itemHeightStyle = computed(() => {
@@ -61,7 +67,8 @@ const itemHeightStyle = computed(() => {
     <slot v-else name="empty" />
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
 div.table-container {
     @apply bg-slate-600;
     max-height: calc(100vh - v-bind(ypx));
@@ -72,6 +79,10 @@ div.table-container {
                 @apply sticky z-10;
                 top: -1px;
             }
+            >tfoot {
+                @apply bg-slate-600 sticky z-10;
+                bottom: -1px;
+            }
             >*>tr, >*>tr>td {
                 height: v-bind(itemHeightStyle);
             }
@@ -79,6 +90,7 @@ div.table-container {
     }
     &::-webkit-scrollbar-track {
         margin-top: v-bind(computedHeaderHeight);
+        margin-bottom: v-bind(computedFooterHeight);
     }
 }
 </style>

src/generated/mammon/api.ts

@@ -0,0 +1,270 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * OpenAPI definition
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: v0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+import type { Configuration } from './configuration';
+import type { AxiosPromise, AxiosInstance, RawAxiosRequestConfig } from 'axios';
+import globalAxios from 'axios';
+// Some imports not used depending on template conditions
+// @ts-ignore
+import { DUMMY_BASE_URL, assertParamExists, setApiKeyToObject, setBasicAuthToObject, setBearerAuthToObject, setOAuthToObject, setSearchParams, serializeDataIfNeeded, toPathString, createRequestFunction, replaceWithSerializableTypeIfNeeded } from './common';
+import type { RequestArgs } from './base';
+// @ts-ignore
+import { BASE_PATH, COLLECTION_FORMATS, BaseAPI, RequiredError, operationServerMap } from './base';
+
+export interface CombiningLedgerDto extends LedgerDto {
+    'ledgerId': number;
+    'name': string;
+    'memberLedgerIds': Array<number>;
+}
+export interface CreateCombiningLedgerCommand {
+    'name': string;
+    'memberLedgerIds': Array<number>;
+}
+export interface CreateMainLedgerCommand {
+    'name': string;
+}
+/**
+ * @type FindAll200ResponseInner
+ */
+export type FindAll200ResponseInner = CombiningLedgerDto | MainLedgerDto;
+
+export interface LedgerDto {
+    'type': string;
+}
+export interface MainLedgerDto extends LedgerDto {
+    'ledgerId': number;
+    'name': string;
+}
+
+/**
+ * LegerControllerApi - axios parameter creator
+ */
+export const LegerControllerApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {CreateCombiningLedgerCommand} createCombiningLedgerCommand 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createCombiningLedger: async (createCombiningLedgerCommand: CreateCombiningLedgerCommand, options: RawAxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'createCombiningLedgerCommand' is not null or undefined
+            assertParamExists('createCombiningLedger', 'createCombiningLedgerCommand', createCombiningLedgerCommand)
+            const localVarPath = `/ledgers/combining`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+            localVarHeaderParameter['Accept'] = '*/*';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(createCombiningLedgerCommand, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {CreateMainLedgerCommand} createMainLedgerCommand 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createMainLedger: async (createMainLedgerCommand: CreateMainLedgerCommand, options: RawAxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'createMainLedgerCommand' is not null or undefined
+            assertParamExists('createMainLedger', 'createMainLedgerCommand', createMainLedgerCommand)
+            const localVarPath = `/ledgers/main`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+            localVarHeaderParameter['Accept'] = '*/*';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(createMainLedgerCommand, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        findAll: async (options: RawAxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/ledgers`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            localVarHeaderParameter['Accept'] = '*/*';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * LegerControllerApi - functional programming interface
+ */
+export const LegerControllerApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = LegerControllerApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {CreateCombiningLedgerCommand} createCombiningLedgerCommand 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async createCombiningLedger(createCombiningLedgerCommand: CreateCombiningLedgerCommand, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<CombiningLedgerDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.createCombiningLedger(createCombiningLedgerCommand, options);
+            const localVarOperationServerIndex = configuration?.serverIndex ?? 0;
+            const localVarOperationServerBasePath = operationServerMap['LegerControllerApi.createCombiningLedger']?.[localVarOperationServerIndex]?.url;
+            return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
+        },
+        /**
+         * 
+         * @param {CreateMainLedgerCommand} createMainLedgerCommand 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async createMainLedger(createMainLedgerCommand: CreateMainLedgerCommand, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<MainLedgerDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.createMainLedger(createMainLedgerCommand, options);
+            const localVarOperationServerIndex = configuration?.serverIndex ?? 0;
+            const localVarOperationServerBasePath = operationServerMap['LegerControllerApi.createMainLedger']?.[localVarOperationServerIndex]?.url;
+            return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async findAll(options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<FindAll200ResponseInner>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.findAll(options);
+            const localVarOperationServerIndex = configuration?.serverIndex ?? 0;
+            const localVarOperationServerBasePath = operationServerMap['LegerControllerApi.findAll']?.[localVarOperationServerIndex]?.url;
+            return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
+        },
+    }
+};
+
+/**
+ * LegerControllerApi - factory interface
+ */
+export const LegerControllerApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = LegerControllerApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {CreateCombiningLedgerCommand} createCombiningLedgerCommand 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createCombiningLedger(createCombiningLedgerCommand: CreateCombiningLedgerCommand, options?: RawAxiosRequestConfig): AxiosPromise<CombiningLedgerDto> {
+            return localVarFp.createCombiningLedger(createCombiningLedgerCommand, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {CreateMainLedgerCommand} createMainLedgerCommand 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createMainLedger(createMainLedgerCommand: CreateMainLedgerCommand, options?: RawAxiosRequestConfig): AxiosPromise<MainLedgerDto> {
+            return localVarFp.createMainLedger(createMainLedgerCommand, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        findAll(options?: RawAxiosRequestConfig): AxiosPromise<Array<FindAll200ResponseInner>> {
+            return localVarFp.findAll(options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * LegerControllerApi - object-oriented interface
+ */
+export class LegerControllerApi extends BaseAPI {
+    /**
+     * 
+     * @param {CreateCombiningLedgerCommand} createCombiningLedgerCommand 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    public createCombiningLedger(createCombiningLedgerCommand: CreateCombiningLedgerCommand, options?: RawAxiosRequestConfig) {
+        return LegerControllerApiFp(this.configuration).createCombiningLedger(createCombiningLedgerCommand, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {CreateMainLedgerCommand} createMainLedgerCommand 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    public createMainLedger(createMainLedgerCommand: CreateMainLedgerCommand, options?: RawAxiosRequestConfig) {
+        return LegerControllerApiFp(this.configuration).createMainLedger(createMainLedgerCommand, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    public findAll(options?: RawAxiosRequestConfig) {
+        return LegerControllerApiFp(this.configuration).findAll(options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
+

src/generated/mammon/base.ts

@@ -0,0 +1,62 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * OpenAPI definition
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: v0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+import type { Configuration } from './configuration';
+// Some imports not used depending on template conditions
+// @ts-ignore
+import type { AxiosPromise, AxiosInstance, RawAxiosRequestConfig } from 'axios';
+import globalAxios from 'axios';
+
+export const BASE_PATH = "http://localhost:8080".replace(/\/+$/, "");
+
+export const COLLECTION_FORMATS = {
+    csv: ",",
+    ssv: " ",
+    tsv: "\t",
+    pipes: "|",
+};
+
+export interface RequestArgs {
+    url: string;
+    options: RawAxiosRequestConfig;
+}
+
+export class BaseAPI {
+    protected configuration: Configuration | undefined;
+
+    constructor(configuration?: Configuration, protected basePath: string = BASE_PATH, protected axios: AxiosInstance = globalAxios) {
+        if (configuration) {
+            this.configuration = configuration;
+            this.basePath = configuration.basePath ?? basePath;
+        }
+    }
+};
+
+export class RequiredError extends Error {
+    constructor(public field: string, msg?: string) {
+        super(msg);
+        this.name = "RequiredError"
+    }
+}
+
+interface ServerMap {
+    [key: string]: {
+        url: string,
+        description: string,
+    }[];
+}
+
+export const operationServerMap: ServerMap = {
+}

src/generated/mammon/common.ts

@@ -0,0 +1,127 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * OpenAPI definition
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: v0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import type { Configuration } from "./configuration";
+import type { RequestArgs } from "./base";
+import type { AxiosInstance, AxiosResponse } from 'axios';
+import { RequiredError } from "./base";
+
+export const DUMMY_BASE_URL = 'https://example.com'
+
+/**
+ *
+ * @throws {RequiredError}
+ */
+export const assertParamExists = function (functionName: string, paramName: string, paramValue: unknown) {
+    if (paramValue === null || paramValue === undefined) {
+        throw new RequiredError(paramName, `Required parameter ${paramName} was null or undefined when calling ${functionName}.`);
+    }
+}
+
+export const setApiKeyToObject = async function (object: any, keyParamName: string, configuration?: Configuration) {
+    if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue = typeof configuration.apiKey === 'function'
+            ? await configuration.apiKey(keyParamName)
+            : await configuration.apiKey;
+        object[keyParamName] = localVarApiKeyValue;
+    }
+}
+
+export const setBasicAuthToObject = function (object: any, configuration?: Configuration) {
+    if (configuration && (configuration.username || configuration.password)) {
+        object["auth"] = { username: configuration.username, password: configuration.password };
+    }
+}
+
+export const setBearerAuthToObject = async function (object: any, configuration?: Configuration) {
+    if (configuration && configuration.accessToken) {
+        const accessToken = typeof configuration.accessToken === 'function'
+            ? await configuration.accessToken()
+            : await configuration.accessToken;
+        object["Authorization"] = "Bearer " + accessToken;
+    }
+}
+
+export const setOAuthToObject = async function (object: any, name: string, scopes: string[], configuration?: Configuration) {
+    if (configuration && configuration.accessToken) {
+        const localVarAccessTokenValue = typeof configuration.accessToken === 'function'
+            ? await configuration.accessToken(name, scopes)
+            : await configuration.accessToken;
+        object["Authorization"] = "Bearer " + localVarAccessTokenValue;
+    }
+}
+
+
+function setFlattenedQueryParams(urlSearchParams: URLSearchParams, parameter: any, key: string = ""): void {
+    if (parameter == null) return;
+    if (typeof parameter === "object") {
+        if (Array.isArray(parameter) || parameter instanceof Set) {
+            (parameter as any[]).forEach(item => setFlattenedQueryParams(urlSearchParams, item, key));
+        }
+        else {
+            Object.keys(parameter).forEach(currentKey =>
+                setFlattenedQueryParams(urlSearchParams, parameter[currentKey], `${key}${key !== '' ? '.' : ''}${currentKey}`)
+            );
+        }
+    }
+    else {
+        if (urlSearchParams.has(key)) {
+            urlSearchParams.append(key, parameter);
+        }
+        else {
+            urlSearchParams.set(key, parameter);
+        }
+    }
+}
+
+export const setSearchParams = function (url: URL, ...objects: any[]) {
+    const searchParams = new URLSearchParams(url.search);
+    setFlattenedQueryParams(searchParams, objects);
+    url.search = searchParams.toString();
+}
+
+/**
+ * JSON serialization helper function which replaces instances of unserializable types with serializable ones.
+ * This function will run for every key-value pair encountered by JSON.stringify while traversing an object.
+ * Converting a set to a string will return an empty object, so an intermediate conversion to an array is required.
+ */
+// @ts-ignore
+export const replaceWithSerializableTypeIfNeeded = function(key: string, value: any) {
+    if (value instanceof Set) {
+        return Array.from(value);
+    } else {
+        return value;
+    }
+}
+
+export const serializeDataIfNeeded = function (value: any, requestOptions: any, configuration?: Configuration) {
+    const nonString = typeof value !== 'string';
+    const needsSerialization = nonString && configuration && configuration.isJsonMime
+        ? configuration.isJsonMime(requestOptions.headers['Content-Type'])
+        : nonString;
+    return needsSerialization
+        ? JSON.stringify(value !== undefined ? value : {}, replaceWithSerializableTypeIfNeeded)
+        : (value || "");
+}
+
+export const toPathString = function (url: URL) {
+    return url.pathname + url.search + url.hash
+}
+
+export const createRequestFunction = function (axiosArgs: RequestArgs, globalAxios: AxiosInstance, BASE_PATH: string, configuration?: Configuration) {
+    return <T = unknown, R = AxiosResponse<T>>(axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
+        const axiosRequestArgs = {...axiosArgs.options, url: (axios.defaults.baseURL ? '' : configuration?.basePath ?? basePath) + axiosArgs.url};
+        return axios.request<T, R>(axiosRequestArgs);
+    };
+}

src/generated/mammon/configuration.ts

@@ -0,0 +1,121 @@
+/* tslint:disable */
+/**
+ * OpenAPI definition
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: v0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+interface AWSv4Configuration {
+  options?: {
+    region?: string
+    service?: string
+  }
+  credentials?: {
+    accessKeyId?: string
+    secretAccessKey?: string,
+    sessionToken?: string
+  }
+}
+
+export interface ConfigurationParameters {
+    apiKey?: string | Promise<string> | ((name: string) => string) | ((name: string) => Promise<string>);
+    username?: string;
+    password?: string;
+    accessToken?: string | Promise<string> | ((name?: string, scopes?: string[]) => string) | ((name?: string, scopes?: string[]) => Promise<string>);
+    awsv4?: AWSv4Configuration;
+    basePath?: string;
+    serverIndex?: number;
+    baseOptions?: any;
+    formDataCtor?: new () => any;
+}
+
+export class Configuration {
+    /**
+     * parameter for apiKey security
+     * @param name security name
+     */
+    apiKey?: string | Promise<string> | ((name: string) => string) | ((name: string) => Promise<string>);
+    /**
+     * parameter for basic security
+     */
+    username?: string;
+    /**
+     * parameter for basic security
+     */
+    password?: string;
+    /**
+     * parameter for oauth2 security
+     * @param name security name
+     * @param scopes oauth2 scope
+     */
+    accessToken?: string | Promise<string> | ((name?: string, scopes?: string[]) => string) | ((name?: string, scopes?: string[]) => Promise<string>);
+    /**
+     * parameter for aws4 signature security
+     * @param {Object} AWS4Signature - AWS4 Signature security
+     * @param {string} options.region - aws region
+     * @param {string} options.service - name of the service.
+     * @param {string} credentials.accessKeyId - aws access key id
+     * @param {string} credentials.secretAccessKey - aws access key
+     * @param {string} credentials.sessionToken - aws session token
+     * @memberof Configuration
+     */
+    awsv4?: AWSv4Configuration;
+    /**
+     * override base path
+     */
+    basePath?: string;
+    /**
+     * override server index
+     */
+    serverIndex?: number;
+    /**
+     * base options for axios calls
+     */
+    baseOptions?: any;
+    /**
+     * The FormData constructor that will be used to create multipart form data
+     * requests. You can inject this here so that execution environments that
+     * do not support the FormData class can still run the generated client.
+     *
+     * @type {new () => FormData}
+     */
+    formDataCtor?: new () => any;
+
+    constructor(param: ConfigurationParameters = {}) {
+        this.apiKey = param.apiKey;
+        this.username = param.username;
+        this.password = param.password;
+        this.accessToken = param.accessToken;
+        this.awsv4 = param.awsv4;
+        this.basePath = param.basePath;
+        this.serverIndex = param.serverIndex;
+        this.baseOptions = {
+            ...param.baseOptions,
+            headers: {
+                ...param.baseOptions?.headers,
+            },
+        };
+        this.formDataCtor = param.formDataCtor;
+    }
+
+    /**
+     * Check if the given MIME is a JSON MIME.
+     * JSON MIME examples:
+     *   application/json
+     *   application/json; charset=UTF8
+     *   APPLICATION/JSON
+     *   application/vnd.company+json
+     * @param mime - MIME (Multipurpose Internet Mail Extensions)
+     * @return True if the given MIME is JSON, false otherwise.
+     */
+    public isJsonMime(mime: string): boolean {
+        const jsonMime: RegExp = /^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$/i;
+        return mime !== null && jsonMime.test(mime);
+    }
+}

src/generated/mammon/index.ts

@@ -0,0 +1,18 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * OpenAPI definition
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: v0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export * from "./api";
+export * from "./configuration";
+

src/ledger/CreateLedgerModal.vue

@@ -0,0 +1,73 @@
+<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/LedgerLine.vue

@@ -0,0 +1,19 @@
+<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/index.ts

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

src/ledger/ledger.ts

@@ -0,0 +1,34 @@
+import {CreateCombiningLedgerCommand, CreateMainLedgerCommand, FindAll200ResponseInner} from "@/generated/mammon";
+import {defineStore} from "pinia";
+import {ref} from "vue";
+import {ledgerControllerApi} from "@/mammon";
+
+export const MAIN_LEDGER = "MAIN";
+export const COMBINING_LEDGER = "COMBINING";
+
+export type LedgerType = typeof MAIN_LEDGER | typeof COMBINING_LEDGER;
+export type Ledger = FindAll200ResponseInner;
+
+export const useLedgersStore = defineStore('ledgers', () => {
+    const ledgers = ref<Ledger[]>([]);
+
+    const createMain = (ledger: CreateMainLedgerCommand) => ledgerControllerApi.createMainLedger(ledger).then(response => {
+        const ledger = response.data;
+
+        ledgers.value.push(ledger);
+        return ledger;
+    });
+
+    const createCombining = (ledger: CreateCombiningLedgerCommand) => ledgerControllerApi.createCombiningLedger(ledger).then(response => {
+        const ledger = response.data;
+
+        ledgers.value.push(ledger);
+        return ledger;
+    });
+
+    const refresh = () => ledgerControllerApi.findAll().then(response => ledgers.value = response.data);
+
+    refresh();
+
+    return {ledgers, createMain, createCombining, refresh};
+})

src/main.ts

@@ -1,4 +1,3 @@
-import { useAuthStore } from "@/auth";
 import { createPinia } from 'pinia';
 import { createApp } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
@@ -17,18 +16,6 @@ const router = createRouter({
 });
 
 app.use(pinia);
-
-const authStore = useAuthStore();
-
-router.beforeEach(async to => {
-    if (to.name === 'callback') {
-        await authStore.login();
-        return { name: 'home' };
-    } else if (!authStore.isLoggedIn) {
-        await authStore.redirect();
-    }
-});
-
 app.use(router);
 
 app.mount('#app');

src/mammon/index.ts

@@ -0,0 +1 @@
+export * from './mammonService'

src/mammon/mammonService.ts

@@ -0,0 +1,14 @@
+import {logResource} from "@/service";
+import axios from "axios";
+import {LegerControllerApi} from "@/generated/mammon";
+
+const mammonAxiosInstance = axios.create({
+    baseURL: import.meta.env.VITE_MAMMON_URL,
+    headers: {
+        'Accept': 'application/json',
+        "Content-Type": "application/json",
+    },
+})
+logResource(mammonAxiosInstance)
+
+export const ledgerControllerApi = new LegerControllerApi(undefined, import.meta.env.VITE_MAMMON_URL, mammonAxiosInstance);

src/marbas/MarbasObject.ts

@@ -1,3 +0,0 @@
-export type MarbasObject = {
-    id: number;
-}

src/marbas/index.ts

@@ -1,3 +0,0 @@
-export * from './MarbasObject';
-export * from './marbasService';
-

src/marbas/marbasService.ts

@@ -1,50 +0,0 @@
-import { useAuthStore } from "@/auth";
-import { logResource } from "@/service";
-import axios from "axios";
-
-export const marbasAxiosInstance = axios.create({
-    baseURL: import.meta.env.VITE_MARBAS_URL,
-    headers: {
-        'Accept': 'application/json',
-        "Content-Type": "application/json",
-    },
-})
-
-marbasAxiosInstance.interceptors.request.use(r => {
-    const authStore = useAuthStore();
-
-    if (!authStore.isLoggedIn) {
-        throw new Error("Not logged in");
-    }
-    
-    const accessToken = authStore.accessToken;
-
-    if (accessToken) {
-        r.headers.Authorization = `Bearer ${accessToken}`;
-    }
-    if (!r.params?.page_size) {
-        r.params = { ...r.params, page_size: 250 };
-    }
-    return r;
-})
-logResource(marbasAxiosInstance)
-marbasAxiosInstance.interceptors.response.use(async r => {
-    let next: string = r.data?.next;
-    let results = r.data?.results;
-
-    if (next) {
-        if (!next.startsWith(import.meta.env.VITE_MARBAS_URL)) { // FIME remove once the API is fixed
-            next = import.meta.env.VITE_MARBAS_URL + next.replace(/http(s)?:\/\/[^/]+\//g, '');
-        }
-
-        results = results.concat((await marbasAxiosInstance.request({
-            ...r.config,
-            url: next,
-            baseURL: '',
-        })).data);
-    }
-    if (results) {
-        r.data = results;
-    }
-    return r;
-})

src/market/acquisition/AcquisitionQuantilsTooltip.vue

@@ -74,7 +74,8 @@ watchEffect(async () => {
     </Tooltip>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
 .tooltip {
     @apply ms-auto;
     >:deep(div.header) {

src/market/acquisition/AcquisitionResultTable.vue

@@ -120,12 +120,39 @@ const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() =>
 })
 const getLineColor = (result: Result) => {
     if (result.precentProfit >= (threshold.value / 100)) {
-        return 'line-green';
+        return 'line-green'; 
     } else if (result.precentProfit < 0) {
         return 'line-red';
     }
     return '';
 }
+const total = computed(() => {
+    if (sortedArray.value.length <= 1) {
+        return null;
+    }
+
+    const first = sortedArray.value[0];
+
+    if (!first) {
+        return null;
+    }
+
+    const sameItem = sortedArray.value.every(r => r.type.id === first.type.id);
+    const quantity = sameItem ? sortedArray.value.reduce((acc, r) => acc + r.quantity, 0) : 0;
+    const totalRemaining = sameItem ? sortedArray.value.reduce((acc, r) => acc + r.remaining, 0) : 0;
+    const price = sortedArray.value.reduce((acc, r) => acc + r.price * r.remaining, 0) / totalRemaining;
+    const precentProfit = marketTaxStore.calculateProfit(price, first.sell);
+    const iskProfit = sortedArray.value.reduce((acc, r) => acc + r.iskProfit, 0);
+
+    return {
+        sameItem,
+        price,
+        remaining: totalRemaining,
+        quantity,
+        precentProfit,
+        iskProfit
+    };
+});
 </script>
 
 <template>
@@ -142,7 +169,7 @@ const getLineColor = (result: Result) => {
             </div>
         </div>
     </div>
-    <VirtualScrollTable :list="sortedArray" :itemHeight="33"  bottom="1rem">
+    <VirtualScrollTable :list="sortedArray" :itemHeight="33" :footerHeight="!!total ? 33 : 0" bottom="1rem">
         <template #default="{ list }">
             <thead>
                 <tr>
@@ -178,6 +205,37 @@ const getLineColor = (result: Result) => {
                     </td>
                 </tr>
             </tbody>
+            <tfoot v-if="!!total">
+                <tr>
+                    <td v-if="showColumn('name')">Total</td>
+                    <td v-if="showColumn('buy')">
+                        <template v-if="!showColumn('name')">Total</template>
+                    </td>
+                    <td v-if="showColumn('sell')">
+                        <template v-if="!showColumn('name') && !showColumn('buy')">Total</template>
+                    </td>
+                    <td v-if="showColumn('date')">
+                        <template v-if="!showColumn('name') && !showColumn('buy') && !showColumn('sell')">Total</template>
+                    </td>
+                    <td v-if="showColumn('price')"  class="text-right">
+                        <template v-if="total.sameItem">
+                            {{ formatIsk(total.price) }}
+                        </template>
+                    </td>
+                    <td v-if="showColumn('remaining')"  class="text-right">
+                        <template v-if="total.sameItem">
+                            {{ total.remaining }}/{{ total.quantity }}
+                        </template>
+                    </td>
+                    <td v-if="showColumn('precentProfit')"  class="text-right">
+                        <template v-if="total.sameItem">
+                            {{ percentFormater.format(total.precentProfit) }}
+                        </template>
+                    </td>
+                    <td v-if="showColumn('iskProfit')"  class="text-right">{{ formatIsk(total.iskProfit) }}</td>
+                    <td v-if="showColumn('buttons')" />
+                </tr>
+            </tfoot>
         </template>
         <template #empty>
             <div class="text-center mt-4">
@@ -187,7 +245,8 @@ const getLineColor = (result: Result) => {
     </VirtualScrollTable>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
 div.end {
     @apply justify-self-end ms-2;
 }

src/market/acquisition/BuyModal.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { Modal } from '@/components';
+import {Modal} from '@/components';
-import { formatIsk } from '@/formaters';
+import {formatIsk} from '@/formaters';
-import { MarketType, MarketTypeLabel } from '@/market';
+import {MarketType, MarketTypeLabel} from '@/market';
-import { ref } from 'vue';
+import {ref} from 'vue';
-import { useAcquiredTypesStore } from './acquisition';
+import {useAcquiredTypesStore} from './acquisition';
-
 
 const acquiredTypesStore = useAcquiredTypesStore();
 

src/market/acquisition/acquisition.ts

@@ -1,49 +1,16 @@
-import { marbasAxiosInstance, MarbasObject } from "@/marbas";
-import { AxiosResponse } from "axios";
-import log from "loglevel";
 import { defineStore } from "pinia";
 import { computed, ref } from "vue";
 
 export type AcquiredTypeSource = 'bo' | 'so' | 'prod' | 'misc';
 
-export type MarbasAcquiredType = MarbasObject & {
-    type: number;
-    quantity: number;
-    remaining: number;
-    price: number;
-    date: Date;
-    source: AcquiredTypeSource;
-    user: number;
-}
-
-type RawMarbasAcquiredType =  Omit<MarbasAcquiredType, 'date'> & {
-    date: string;
-}
-
-type InsertableRawMarbasAcquiredType =  Omit<MarbasAcquiredType, 'id' | 'user' | 'date'>;
-
-const mapRawMarbasAcquiredType = (raw: RawMarbasAcquiredType): MarbasAcquiredType => ({
-    ...raw,
-    date: raw.date ? new Date(raw.date) : new Date()
-});
-
-const endpoint = '/api/acquisitions/';
-
 export const useAcquiredTypesStore = defineStore('market-acquisition', () => {
-    const acquiredTypes = ref<MarbasAcquiredType[]>([]);
+    const acquiredTypes = ref<any[]>([]); // TODO
 
     const types = computed(() => acquiredTypes.value.filter(item => item.remaining > 0));
     const addAcquiredType = async (type: number, quantity: number, price: number, source?: AcquiredTypeSource) => { 
-        const newItem = mapRawMarbasAcquiredType((await marbasAxiosInstance.post<RawMarbasAcquiredType, AxiosResponse<RawMarbasAcquiredType>, InsertableRawMarbasAcquiredType>(endpoint, {
+        const newItem = [];
-            type: type,
-            quantity: quantity,
-            remaining: quantity,
-            price: price,
-            source: source ?? 'misc', 
-        })).data);
 
         acquiredTypes.value = [...acquiredTypes.value, newItem];
-        log.info(`Acquired type ${newItem.id} with quantity ${newItem.quantity} and price ${newItem.price}`, newItem);
     };
     const removeAcquiredType = async (id: number, quantity: number) => {
         const found = acquiredTypes.value.find(t => t.id === id);
@@ -64,11 +31,11 @@ export const useAcquiredTypesStore = defineStore('market-acquisition', () => {
                 return i;
             }
         });
-        await marbasAxiosInstance.put(`${endpoint}${item.id}/`, item);
-        log.info(`Acquired type ${item.id} remaining: ${item.remaining}`, item);
     };
-    
-    marbasAxiosInstance.get<RawMarbasAcquiredType[]>(endpoint).then(res => acquiredTypes.value = res.data.map(mapRawMarbasAcquiredType));
 
-    return { acquiredTypes: types, addAcquiredType, removeAcquiredType };
+    const refresh = () => {}
+
+    refresh();
+
+    return { acquiredTypes: types, addAcquiredType, removeAcquiredType, refresh };
 });

src/market/history/EsiMarketOrderHistory.ts

@@ -23,8 +23,8 @@ const historyCache: RegionalMarketCache<EsiMarketOrderHistory[]> = new RegionalM
     return date;
 });
 
-export const getHistory = async (tyeId: number, regionId?: number): Promise<EsiMarketOrderHistory[]> => {
+export const getHistory = async (typeId: number, regionId?: number): Promise<EsiMarketOrderHistory[]> => {
     const rId = regionId ?? jitaId;
 
-    return historyCache.computeIfAbsent(rId, tyeId, async () => (await esiAxiosInstance.get(`/markets/${rId}/history/`, { params: { type_id: tyeId } })).data);
+    return historyCache.computeIfAbsent(rId, typeId, async () => (await esiAxiosInstance.get(`/markets/${rId}/history/`, { params: { type_id: typeId } })).data);
 }

src/market/market.ts

@@ -1,3 +1 @@
-
 export const jitaId = 10000002;
-

src/market/tax/TaxInput.vue

@@ -17,7 +17,8 @@ const { brokerFee, scc } = storeToRefs(useMarketTaxStore());
     </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
 div.end {
     @apply justify-self-end ms-2;
 }

src/market/tracking/TrackingResultTable.vue

@@ -6,6 +6,7 @@ import { getHistoryQuartils, MarketType, MarketTypeLabel, TaxInput, useMarketTax
 import { BookmarkSlashIcon, ShoppingCartIcon } from '@heroicons/vue/24/outline';
 import { useStorage } from '@vueuse/core';
 import { computed, ref } from 'vue';
+import { useAcquiredTypesStore } from '../acquisition';
 import { TrackingResult } from './tracking';
 
 type Result = {
@@ -17,6 +18,7 @@ type Result = {
     q1: number;
     median: number;
     q3: number;
+    acquisitions: number;
     profit: number;
     score: number;
 }
@@ -44,6 +46,7 @@ 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);
@@ -63,6 +66,9 @@ const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() =>
         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);
 
         return {
             type: r.type,
@@ -73,6 +79,7 @@ const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() =>
             q1: quartils.q1,
             median: quartils.median,
             q3: quartils.q3,
+            acquisitions,
             profit,
             score
         };
@@ -128,6 +135,7 @@ const getLineColor = (result: Result) => {
                     <SortableHeader v-bind="headerProps" sortKey="q3">Q3</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>
                     <SortableHeader v-bind="headerProps" sortKey="buttons" unsortable />
                 </tr>
             </thead>
@@ -143,6 +151,7 @@ const getLineColor = (result: Result) => {
                     <td v-if="showColumn('q3')" class="text-right">{{ formatIsk(r.data.q3) }}</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>
@@ -158,7 +167,8 @@ const getLineColor = (result: Result) => {
     </VirtualScrollTable>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
 div.end {
     @apply justify-self-end ms-2;
 }

src/market/tracking/tracking.ts

@@ -1,4 +1,3 @@
-import { marbasAxiosInstance, MarbasObject } from "@/marbas";
 import { EsiMarketOrderHistory, getHistory, MarketType, MarketTypePrice } from "@/market";
 import log from "loglevel";
 import { defineStore } from "pinia";
@@ -12,21 +11,16 @@ export type TrackingResult = {
     orderCount: number,
 }
 
-export type MarbasTrackedType = MarbasObject & {
-    type: number
-};
-
 const endpoint = '/api/types_tracking/';
 
 export const useMarketTrackingStore = defineStore('marketTracking', () => {
-    const trackedTypes = ref<MarbasTrackedType[]>([]);
+    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) {
-            trackedTypes.value = [...trackedTypes.value, (await marbasAxiosInstance.post<MarbasTrackedType>(endpoint, { type })).data];
             log.info(`Tracking type ${type}`);
         }
     }
@@ -38,12 +32,8 @@ export const useMarketTrackingStore = defineStore('marketTracking', () => {
         }
 
         trackedTypes.value = trackedTypes.value.filter(t => t.id !== found.id);
-        await marbasAxiosInstance.delete(`${endpoint}${found.id}`);
-        log.info(`Stopped tracking type ${type}`);
     }
 
-    marbasAxiosInstance.get<MarbasTrackedType[]>(endpoint).then(res => trackedTypes.value = res.data);
-
     return { types, addType, removeType };
 });
 

src/market/type/MarketType.ts

@@ -1,5 +1,3 @@
-import { marbasAxiosInstance } from "@/marbas";
-
 export type MarketType = {
     id: number;
     group_id: number;
@@ -18,15 +16,9 @@ export const getMarketTypes = async (types: (string | number)[]): Promise<Market
     if (types.length === 0) {
         return [];
     } else if (types.length === 1 && typeof types[0] === "number") {
-        return [(await marbasAxiosInstance.get<MarketType>(`/sde/types/${types[0]}/`)).data];
+        return [];
     }
-    return (await marbasAxiosInstance.post<MarketType[]>("/api/types/search", types.map(t => {
+    return []
-        if (typeof t === "number") {
-            return { id: t };
-        } else {
-            return { name: t };
-        }
-    }))).data;
 }
 
 const blueprintMarketGrous = [ // TODO add all groups
@@ -49,9 +41,5 @@ const blueprintMarketGrous = [ // TODO add all groups
 ]
 
 export const searchMarketTypes = async (search: string): Promise<MarketType[]> => {
-    return (await marbasAxiosInstance.post<MarketType[]>("/api/types/search", [{
+    return []
-        name__icontains: search,
-        marketgroup_id___not: null,
-        marketgroup_id__in___not: blueprintMarketGrous,
-    }])).data;
 }

src/market/type/MarketTypeInput.vue

@@ -104,7 +104,8 @@ watchEffect(async () => {
     </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
 .fake-input {
     @apply w-96 flex border bg-slate-500 rounded px-1 py-0.5;
 

src/market/type/MarketTypeLabel.vue

@@ -29,7 +29,8 @@ withDefaults(defineProps<Props>(), {
     </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
 button:deep(>svg), .button:deep(>svg) {
     @apply !w-4 !h-4;
 }

src/pages/Ledger.vue

@@ -0,0 +1,17 @@
+<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/Market.vue

@@ -20,7 +20,9 @@ import { RouterLink, RouterView } from 'vue-router';
     </div>
 </template>
 
-<style scoped lang="postcss">
+<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 {

src/pages/ledger/ListLedgers.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+import {LedgerLine, useLedgersStore} from "@/ledger";
+
+const {ledgers} = useLedgersStore();
+
+</script>
+
+<template>
+  <div class="mt-4">
+    <LedgerLine v-for="leger in ledgers" :ledger="leger"/>
+  </div>
+</template>

src/pages/market/Acquisitions.vue

@@ -6,11 +6,12 @@ import { ref, watch } from 'vue';
 const buyModal = ref<typeof BuyModal>();
 const sellModal = ref<typeof SellModal>();
 
-
 const apraisalStore = useApraisalStore();
 const acquiredTypesStore = useAcquiredTypesStore();
 const items = ref<AcquiredType[]>([]);
 
+const refresh = async () => await acquiredTypesStore.refresh();
+
 watch(() => acquiredTypesStore.acquiredTypes, async itms => {
     if (itms.length === 0) {
         return;
@@ -34,6 +35,9 @@ watch(() => acquiredTypesStore.acquiredTypes, async itms => {
 
 <template>
     <div class="mt-4">
+        <div class="flex">
+            <button class="ms-auto" @click="refresh">Refresh</button>
+        </div>
         <template v-if="items.length > 0">
             <AcquisitionResultTable :items="items" @buy="(types, price, buy, sell) => buyModal?.open(types[0].type, { 'Price': price, 'Buy': buy, 'Sell': sell })" @sell="types => sellModal?.open(types)" ignoredColums="date" />
             <BuyModal ref="buyModal" />

src/pages/market/Tracking.vue

@@ -1,4 +1,5 @@
 <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';
@@ -56,10 +57,6 @@ watch(() => marketTrackingStore.types, async t => {
 
     const prices = await apraisalStore.getPrices(await getMarketTypes(typesToLoad));
 
-    items.value = [
-        ...items.value
-    ];
-
     typesToLoad.forEach(async i => items.value.push(await createResult(i, prices.find(p => p.type.id === i) as MarketTypePrice)));
 }, { immediate: true });
 </script>
@@ -76,5 +73,10 @@ watch(() => marketTrackingStore.types, async t => {
         <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

@@ -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" />
+            <TrackingResultTable :items="[result]" infoOnly :ignoredColums="['name', 'acquisitions']" />
         </div>
         <div v-if="acquisitions && acquisitions.length > 0">
             <span>Acquisitions:</span>
@@ -113,7 +113,8 @@ watch(useRoute(), async route => {
     <BuyModal ref="buyModal" />
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
 img.type-image {
     width: 64px;
     height: 64px;

src/reprocess/BuySellSlider.vue

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

src/reprocess/reprocess.ts

@@ -1,5 +1,3 @@
-import { marbasAxiosInstance } from "@/marbas";
-
 export type ReprocessItemValues = {
     typeID: number;
     name: string;
@@ -22,7 +20,5 @@ export const reprocess = async (items: string, minerals: string, efficiency?: nu
     };
     const source = JSON.stringify(sourceJson);
 
-    const response = await marbasAxiosInstance.post('/reprocess/', source, {params: {efficiency: efficiency ?? 0.55}});
+    return []
-
-    return response.data;
 };

src/routes.ts

@@ -1,16 +1,24 @@
-import { RouteRecordRaw } from 'vue-router';
+import {RouteRecordRaw} from 'vue-router';
 
 export const routes: RouteRecordRaw[] = [
-    { path: '/', name: 'home', component: () => import('@/pages/Index.vue') },
+    {path: '/', name: 'home', component: () => import('@/pages/Index.vue')},
-    { path: '/callback', name: 'callback', component: () => import('@/pages/Index.vue') },
+    {path: '/callback', name: 'callback', component: () => import('@/pages/Index.vue')},
-    { path: '/reprocess', component: () => import('@/pages/Reprocess.vue') },
+
-    { path: '/market', component: () => import('@/pages/Market.vue'), children: [
+    {path: '/ledgers', component: () => import('@/pages/Ledger.vue'), children: [
-        { path: '', redirect: '/market/types' },
+        {path: '', component: () => import('./pages/ledger/ListLedgers.vue')},
-        { path: 'types/:type?', name: 'market-types', component: () => import('@/pages/market/TypeInfo.vue') },
+    ]},
-        { path: 'tracking', component: () => import('@/pages/market/Tracking.vue') },
+
-        { path: 'acquisitions', component: () => import('@/pages/market/Acquisitions.vue') },
+    {path: '/market', component: () => import('@/pages/Market.vue'), children: [
-    ] },
+        {path: '', redirect: '/market/types'},
-    { path: '/tools', component: () => import('@/pages/Tools.vue') },
+        {path: 'types/:type?', name: 'market-types', component: () => import('@/pages/market/TypeInfo.vue')},
-    { path: '/characters', component: () => import('@/pages/Characters.vue') },
+        {path: 'tracking', component: () => import('@/pages/market/Tracking.vue')},
-    { path: '/about', name: 'about', component: () => import('@/pages/About.vue') },
+        {path: 'acquisitions', component: () => import('@/pages/market/Acquisitions.vue')},
+    ]},
+
+    {path: '/reprocess', component: () => import('@/pages/Reprocess.vue')},
+
+    {path: '/tools', component: () => import('@/pages/Tools.vue')},
+
+    {path: '/characters', component: () => import('@/pages/Characters.vue')},
+    {path: '/about', name: 'about', component: () => import('@/pages/About.vue')},
 ];

src/sidebar/Sidebar.vue

@@ -1,73 +1,79 @@
 <script setup lang="ts">
-import { useAuthStore } from '@/auth';
+import {Dropdown} from '@/components';
-import { Dropdown } from '@/components';
+import {RouterLink} from 'vue-router';
-import { RouterLink } from 'vue-router';
 
 const links = [
-    { name: "Market", path: "/market" },
+  {name: "Ledger", path: "/ledgers"},
-    { name: "Reprocess", path: "/reprocess" },
+  {name: "Market", path: "/market"},
-    { name: "Tools", path: "/tools" }
+  {name: "Reprocess", path: "/reprocess"},
+  {name: "Tools", path: "/tools"}
 ];
 
-const authStore = useAuthStore();
 
 const logout = async () => {
-    await authStore.logout();
 }
 </script>
 
 <template>
-    <aside class="fixed top-0 left-0 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0">
+  <aside class="fixed top-0 left-0 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0">
-        <div class="h-full px-3 py-4 overflow-y-auto bg-slate-700 flex flex-col">
+    <div class="h-full px-3 py-4 overflow-y-auto bg-slate-700 flex flex-col">
-            <div class="mb-2 border-b-2 border-emerald-500">
+      <div class="mb-2 border-b-2 border-emerald-500">
-                <Dropdown class="mb-2 user-dropdown">
+        <Dropdown class="mb-2 user-dropdown">
-                    <template #button>
+          <template #button>
-                        <span>{{ authStore.username }}</span>
+            <span>NAME</span>
-                    </template>
+          </template>
-                    <ul>
+          <ul>
-                        <li>
+            <li>
-                            <RouterLink class="sidebar-button py-0.5 px-2" to="/characters">Characters</RouterLink>
+              <RouterLink class="sidebar-button py-0.5 px-2" to="/characters">Characters</RouterLink>
-                        </li>
+            </li>
-                        <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: 'about'}">About EVE Online</RouterLink>
-                        </li>
+            </li>
-                        <li>
+            <li>
-                            <a class="sidebar-button py-0.5 px-2 text-amber-700" @click="logout">Logout</a>
+              <a class="sidebar-button py-0.5 px-2 text-amber-700" @click="logout">Logout</a>
-                        </li>
+            </li>
-                    </ul>
+          </ul>
-                </Dropdown>
+        </Dropdown>
-            </div>
+      </div>
-            <ul class="space-y-2 font-medium">
+      <ul class="space-y-2 font-medium">
-                <li v-for="link in links" :key="link.name">
+        <li v-for="link in links" :key="link.name">
-                    <RouterLink :to="link.path" class="sidebar-button p-2">
+          <RouterLink :to="link.path" class="sidebar-button p-2">
-                        <span>{{ link.name }}</span>
+            <span>{{ link.name }}</span>
-                    </RouterLink>
+          </RouterLink>
-                </li>
+        </li>
-            </ul>
+      </ul>
-        </div>
+    </div>
-    </aside>
+  </aside>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
+
 .sidebar-button {
-    @apply flex items-center rounded-md hover:bg-slate-800 cursor-pointer;
+  @apply flex items-center rounded-md hover:bg-slate-800 cursor-pointer;
 }
+
 .router-link-active {
-    @apply bg-emerald-500 hover:bg-emerald-700;
+  @apply bg-emerald-500 hover:bg-emerald-700;
 }
+
 .user-dropdown {
+  @apply w-full;
+
+  :deep(>div) {
     @apply w-full;
-    :deep(>div) {
+
-        @apply w-full;
+    > div {
-        >div {
+      @apply w-full bg-slate-800;
-            @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;
     }
+  }
+
+  :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;
+  }
 }
 </style>

src/style.css

@@ -1,9 +1,9 @@
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
+
-@tailwind utilities;
+@custom-variant search-cancel (&::-webkit-search-cancel-button);
 
 @layer base {
-    span, table, input, th, tr, td, button, div, hr {
+    span, table, input, th, tr, td, button, a.button, div, hr {
         @apply border-slate-600 text-slate-100 placeholder-slate-400;
     }
 
@@ -11,7 +11,7 @@
         @apply bg-slate-800;
     }
 
-    button {
+    button, a.button {
         @apply py-0.5 px-2 border rounded bg-slate-600 hover:bg-slate-700;
     }
     input {
@@ -49,6 +49,9 @@
             @apply bg-emerald-500 hover:bg-emerald-600;
         }
     }
+    tfoot>tr>td {
+        @apply font-semibold;
+    }
 
 
     ::-webkit-scrollbar {

tailwind.config.js

@@ -1,16 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [
-    require('tailwindcss/plugin')(({ addVariant }) => {
-      addVariant('search-cancel', '&::-webkit-search-cancel-button');
-    }),
-  ],
-}
-

tsconfig.json

@@ -26,7 +26,8 @@
       "src/*": [
         "./src/*"
       ]
-    }
+    },
+    "allowSyntheticDefaultImports": true
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]

vite.config.ts

@@ -2,11 +2,13 @@ import vue from '@vitejs/plugin-vue';
 import * as path from "path";
 import { defineConfig } from 'vite';
 import runtimeEnv from 'vite-plugin-runtime-env';
+import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
     plugins: [
         runtimeEnv(),
         vue(),
+        tailwindcss(),
     ],
     resolve: {
         alias: {