├── public
    └── favicon.png
├── env.d.ts
├── src
    ├── views
    │   ├── BookView.vue
    │   ├── BalanceSheetView.vue
    │   ├── JournalView.vue
    │   ├── LedgerListView.vue
    │   ├── BookListView.vue
    │   ├── LedgerView.vue
    │   └── IncomeStatementView.vue
    ├── components
    │   ├── BookError.vue
    │   ├── Actions.vue
    │   ├── AboutFooter.vue
    │   ├── Nav.vue
    │   ├── AppFooter.vue
    │   ├── SVGButton.vue
    │   ├── AppMain.vue
    │   ├── ChevronIcon.vue
    │   ├── Logo.vue
    │   ├── Title.vue
    │   ├── EditButton.vue
    │   ├── DownloadButton.vue
    │   ├── AppHeader.vue
    │   ├── DeleteButton.vue
    │   ├── DeleteEntry.vue
    │   ├── Figure.vue
    │   ├── TopDate.vue
    │   ├── DeleteBook.vue
    │   ├── DeleteAccount.vue
    │   ├── AddBook.vue
    │   ├── FigureInput.vue
    │   ├── LedgerEntry.vue
    │   ├── BookNav.vue
    │   ├── LabeledInput.vue
    │   ├── AccountsTotal.vue
    │   ├── TypeTotal.vue
    │   ├── BalanceSheetColumn.vue
    │   ├── AddAccount.vue
    │   ├── JournalEntry.vue
    │   ├── ActionPopup.vue
    │   └── AddEntry.vue
    ├── App.vue
    ├── main.ts
    ├── helpers
    │   ├── parseObject.ts
    │   └── FileStorage.ts
    ├── assets
    │   ├── table.css
    │   └── main.css
    ├── data
    │   └── accountTypes.ts
    ├── stores
    │   ├── books.ts
    │   ├── accounts.ts
    │   └── transactions.ts
    └── router
    │   └── index.ts
├── tsconfig.vite-config.json
├── tsconfig.json
├── vite.config.ts
├── index.html
├── .gitignore
├── README.md
├── .eslintrc.cjs
├── package.json
└── LICENSE


/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BrandonXLF/Brandons-Books/main/public/favicon.png


--------------------------------------------------------------------------------
/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | type UUID = `${string}-${string}-${string}-${string}-${string}`;


--------------------------------------------------------------------------------
/src/views/BookView.vue:
--------------------------------------------------------------------------------
1 | <script setup lang="ts">
2 | 	import { RouterView } from 'vue-router';
3 | </script>
4 | 
5 | <template>
6 | 	<RouterView />
7 | </template>
8 | 


--------------------------------------------------------------------------------
/src/components/BookError.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="error">Book does not exist.</div>
 3 | </template>
 4 | 
 5 | <style scoped>
 6 | 	.error {
 7 | 		margin-top: 1em;
 8 | 	}
 9 | </style>
10 | 


--------------------------------------------------------------------------------
/src/components/Actions.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<span class="actions">
 3 | 		<slot />
 4 | 	</span>
 5 | </template>
 6 | 
 7 | <style>
 8 | 	.actions {
 9 | 		display: flex;
10 | 		gap: 0.4em;
11 | 	}
12 | </style>


--------------------------------------------------------------------------------
/tsconfig.vite-config.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "@vue/tsconfig/tsconfig.json",
 3 | 	"include": ["vite.config.*"],
 4 | 	"compilerOptions": {
 5 | 		"composite": true,
 6 | 		"types": ["node"],
 7 | 		"noEmit": false
 8 | 	}
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/components/AboutFooter.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	Online bookkeeping program by
3 | 	<a href="https://www.brandonfowler.me/">Brandon Fowler</a>. <a href="https://github.com/BrandonXLF/Brandons-Books/">View source code</a>.
4 | </template>
5 | 


--------------------------------------------------------------------------------
/src/components/Nav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<nav>
 3 | 		<slot />
 4 | 	</nav>
 5 | </template>
 6 | 
 7 | <style scoped>
 8 | 	nav {
 9 | 		display: flex;
10 | 		flex-wrap: wrap;
11 | 		align-items: center;
12 | 		gap: 0.5em;
13 | 		background: var(--secondary-bg);
14 | 	}
15 | </style>
16 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import AppHeader from './components/AppHeader.vue';
 3 | 	import AppMain from './components/AppMain.vue';
 4 | 	import AppFooter from './components/AppFooter.vue';
 5 | </script>
 6 | 
 7 | <template>
 8 | 	<AppHeader />
 9 | 	<AppMain />
10 | 	<AppFooter />
11 | </template>
12 | 


--------------------------------------------------------------------------------
/src/components/AppFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<footer v-if="$route.meta.footer">
 3 | 		<component :is="$route.meta.footer" />
 4 | 	</footer>
 5 | </template>
 6 | 
 7 | <style scoped>
 8 | 	footer {
 9 | 		border-top: 1px solid #888;
10 | 		padding-top: 0.5rem;
11 | 		margin: 2em;
12 | 		font-size: 0.9em;
13 | 	}
14 | </style>


--------------------------------------------------------------------------------
/src/components/SVGButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<button>
 3 | 		<slot />
 4 | 	</button>
 5 | </template>
 6 | 
 7 | <style scoped>
 8 | 	button {
 9 | 		padding: 0;
10 | 		margin: 0;
11 | 		background: none;
12 | 		font: inherit;
13 | 	}
14 | 
15 | 	button > :deep(svg) {
16 | 		height: 1em;
17 | 		cursor: pointer;
18 | 	}
19 | </style>


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "@vue/tsconfig/tsconfig.dom.json",
 3 | 	"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
 4 | 	"compilerOptions": {
 5 | 		"baseUrl": ".",
 6 | 		"paths": {
 7 | 			"@/*": ["./src/*"]
 8 | 		}
 9 | 	},
10 | 	"references": [
11 | 		{
12 | 			"path": "./tsconfig.vite-config.json"
13 | 		}
14 | 	]
15 | }
16 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp, watch } from 'vue';
 2 | import { createPinia } from 'pinia';
 3 | 
 4 | import App from './App.vue';
 5 | import router from './router';
 6 | import '@/assets/main.css';
 7 | 
 8 | const app = createApp(App);
 9 | const pinia = createPinia();
10 | 
11 | app.use(pinia);
12 | app.use(router);
13 | 
14 | app.mount('#app');
15 | 


--------------------------------------------------------------------------------
/src/helpers/parseObject.ts:
--------------------------------------------------------------------------------
 1 | const idKeys = new Set(['number', 'account', 'book']);
 2 | 
 3 | export default function parseObject<T>(str: string): T {
 4 | 	return JSON.parse(str, function(key, val) {
 5 | 		if (idKeys.has(key) && val !== undefined) {
 6 | 			return String(val) as UUID; // Support old format
 7 | 		}
 8 | 
 9 | 		return val;
10 | 	}) as T;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/components/AppMain.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import { RouterView } from 'vue-router';
 3 | </script>
 4 | 
 5 | <template>
 6 | 	<main>
 7 | 		<RouterView v-if="!$route.meta.error" />
 8 | 		<component :is="$route.meta.error" />
 9 | 	</main>
10 | </template>
11 | 
12 | <style scoped>
13 | 	main {
14 | 		margin: 0 2em 1.5em;
15 | 	}
16 | </style>


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from 'url';
 2 | import { defineConfig } from 'vite';
 3 | import vue from '@vitejs/plugin-vue';
 4 | import vueJsx from '@vitejs/plugin-vue-jsx';
 5 | 
 6 | // https://vitejs.dev/config/
 7 | export default defineConfig({
 8 | 	plugins: [vue(), vueJsx()],
 9 | 	resolve: {
10 | 		alias: {
11 | 			'@': fileURLToPath(new URL('./src', import.meta.url))
12 | 		}
13 | 	}
14 | });
15 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<link rel="shortcut icon" type="image/png" href="/favicon.png" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 		<title>Brandon's Books</title>
 8 | 	</head>
 9 | 	<body>
10 | 		<div id="app"></div>
11 | 		<script type="module" src="/src/main.ts"></script>
12 | 	</body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/components/ChevronIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<svg
 3 | 		xmlns="http://www.w3.org/2000/svg"
 4 | 		class="icon"
 5 | 		viewBox="0 0 24 24"
 6 | 		stroke-width="2"
 7 | 		stroke="currentColor"
 8 | 		fill="none"
 9 | 		stroke-linecap="round"
10 | 		stroke-linejoin="round"
11 | 	>
12 | 		<polyline points="9 6 15 12 9 18" />
13 | 	</svg>
14 | </template>
15 | 
16 | <style scoped>
17 | 	.icon {
18 | 		height: 1em;
19 | 	}
20 | </style>
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | 


--------------------------------------------------------------------------------
/src/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import { RouterLink } from 'vue-router';
 3 | 	import Title from '@/components/Title.vue';
 4 | </script>
 5 | 
 6 | <template>
 7 | 	<RouterLink to="/" class="logo">
 8 | 		<Title text="Brandon's Books" :use-div="true" />
 9 | 	</RouterLink>
10 | </template>
11 | 
12 | <style scoped>
13 | 	.logo {
14 | 		text-decoration: none;
15 | 		color: black;
16 | 		font-weight: bold;
17 | 	}
18 | </style>
19 | 


--------------------------------------------------------------------------------
/src/components/Title.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	defineProps<{
 3 | 		text?: string;
 4 | 		useDiv?: boolean;
 5 | 	}>();
 6 | </script>
 7 | 
 8 | <template>
 9 | 	<component v-if="text" :is="useDiv ? 'div' : 'h1'" class="title">
10 | 		{{ text }}
11 | 	</component>
12 | </template>
13 | 
14 | <style scoped>
15 | 	header > * {
16 | 		display: inline-block;
17 | 	}
18 | 
19 | 	.title::first-letter {
20 | 		background: var(--accent);
21 | 		padding: 0.15em 0.35em;
22 | 		color: white;
23 | 		margin-right: 0.1em;
24 | 	}
25 | </style>
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Brandon's Books
 2 | 
 3 | Brandon's Book is an online bookkeeping program that supports general journals, general ledgers, balance sheets, and income statements.
 4 | 
 5 | ## Set Up
 6 | 
 7 | Dependencies can be installed with `npm install`.
 8 | 
 9 | ## Develop
10 | 
11 | `npm run dev` is used to compile the program with hot-reload.
12 | 
13 | You can also run `npm run lint` to perform code analysis, and `npm run typecheck` for type analysis.
14 | 
15 | ## Build
16 | 
17 | A production build can be made using the `npm run build` command.
18 | 


--------------------------------------------------------------------------------
/src/components/EditButton.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import SVGButton from './SVGButton.vue';
 3 | </script>
 4 | 
 5 | <template>
 6 | 	<SVGButton>
 7 | 		<svg
 8 | 			xmlns="http://www.w3.org/2000/svg"
 9 | 			viewBox="0 0 24 24"
10 | 			stroke-width="2"
11 | 			stroke="currentColor"
12 | 			fill="none"
13 | 			stroke-linecap="round"
14 | 			stroke-linejoin="round"
15 | 		>
16 | 			<path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
17 | 			<line x1="13.5" y1="6.5" x2="17.5" y2="10.5"></line>
18 | 		</svg>
19 | 	</SVGButton>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/src/components/DownloadButton.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import SVGButton from './SVGButton.vue';
 3 | </script>
 4 | 
 5 | <template>
 6 | 	<SVGButton>
 7 | 		<svg
 8 | 			xmlns="http://www.w3.org/2000/svg"
 9 | 			viewBox="0 0 24 24"
10 | 			stroke-width="2"
11 | 			stroke="currentColor"
12 | 			fill="none"
13 | 			stroke-linecap="round"
14 | 			stroke-linejoin="round"
15 | 		>
16 | 			<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
17 | 			<path d="M7 11l5 5l5 -5"></path>
18 | 			<path d="M12 4l0 12"></path>
19 | 		</svg>
20 | 	</SVGButton>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/src/components/AppHeader.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import Title from '@/components/Title.vue';
 3 | 	import Nav from '@/components/Nav.vue';
 4 | 	import Logo from '@/components/Logo.vue';
 5 | </script>
 6 | 
 7 | <template>
 8 | 	<header>
 9 | 		<Nav>
10 | 			<Logo />
11 | 			<component :is="$route.meta.header" />
12 | 		</Nav>
13 | 		<Title v-if="!$route.meta.error" :text="$route.meta.title as string" />
14 | 	</header>
15 | </template>
16 | 
17 | <style scoped>
18 | 	nav {
19 | 		padding: 1.15em 2em;
20 | 		border-bottom: 1px solid var(--border-color);
21 | 	}
22 | 
23 | 	.title {
24 | 		margin: 2rem;
25 | 	}
26 | </style>


--------------------------------------------------------------------------------
/src/components/DeleteButton.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import SVGButton from './SVGButton.vue';
 3 | </script>
 4 | 
 5 | <template>
 6 | 	<SVGButton>
 7 | 		<svg
 8 | 			xmlns="http://www.w3.org/2000/svg"
 9 | 			viewBox="0 0 24 24"
10 | 			stroke-width="2"
11 | 			stroke="red"
12 | 			fill="none"
13 | 			stroke-linecap="round"
14 | 			stroke-linejoin="round"
15 | 		>
16 | 			<line x1="4" y1="7" x2="20" y2="7"></line>
17 | 			<line x1="10" y1="11" x2="10" y2="17"></line>
18 | 			<line x1="14" y1="11" x2="14" y2="17"></line>
19 | 			<path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
20 | 			<path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
21 | 		</svg>
22 | 	</SVGButton>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/src/components/DeleteEntry.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import { useTransactionStore } from '@/stores/transactions';
 3 | 	import { useRoute } from 'vue-router';
 4 | 
 5 | 	const emit = defineEmits<{
 6 | 		(e: 'error', error: string): void;
 7 | 		(e: 'success'): void;
 8 | 	}>();
 9 | 
10 | 	const props = defineProps<{
11 | 		number: UUID;
12 | 	}>();
13 | 
14 | 	const transactions = useTransactionStore();
15 | 	const book = useRoute().params.book as UUID;
16 | 
17 | 	function submit() {
18 | 		transactions.removeTransaction(book, props.number);
19 | 
20 | 		emit('success');
21 | 	}
22 | 
23 | 	defineExpose({ submit });
24 | </script>
25 | 
26 | <template>Are you sure you want to delete this transaction?</template>
27 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | require('@rushstack/eslint-patch/modern-module-resolution');
 3 | 
 4 | module.exports = {
 5 | 	root: true,
 6 | 	extends: [
 7 | 		'plugin:vue/vue3-essential',
 8 | 		'eslint:recommended',
 9 | 		'@vue/eslint-config-typescript/recommended',
10 | 		'@vue/eslint-config-prettier'
11 | 	],
12 | 	env: {
13 | 		'vue/setup-compiler-macros': true
14 | 	},
15 | 	rules: {
16 | 		'vue/multi-word-component-names': ['off'],
17 | 		'prettier/prettier': [
18 | 			'warn',
19 | 			{
20 | 				singleQuote: true,
21 | 				useTabs: true,
22 | 				endOfLine: 'auto',
23 | 				vueIndentScriptAndStyle: true,
24 | 				trailingComma: 'none',
25 | 				arrowParens: 'avoid'
26 | 			}
27 | 		],
28 | 		'typescript-eslint/ban-ts-comment': ['off']
29 | 	}
30 | };
31 | 


--------------------------------------------------------------------------------
/src/components/Figure.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import { AccountType, accountTypes } from '@/data/accountTypes';
 3 | 	import { computed } from 'vue';
 4 | 
 5 | 	const props = defineProps<{
 6 | 		value: number;
 7 | 		multiplier?: number;
 8 | 		accountType?: AccountType;
 9 | 	}>();
10 | 
11 | 	const multiplier =
12 | 		props.multiplier ??
13 | 		(props.accountType !== undefined
14 | 			? accountTypes[props.accountType as AccountType].multiplier
15 | 			: 1);
16 | 
17 | 	const value = computed(() => props.value * multiplier);
18 | 	const display = computed(() => Math.abs(value.value).toLocaleString());
19 | </script>
20 | 
21 | <template>
22 | 	<template v-if="value < 0">(</template>{{ display
23 | 	}}<template v-if="value < 0">)</template>
24 | </template>
25 | 


--------------------------------------------------------------------------------
/src/components/TopDate.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	const emit = defineEmits<{
 3 | 		(event: 'update:modelValue', value?: Date): void;
 4 | 	}>();
 5 | 
 6 | 	const props = defineProps<{
 7 | 		modelValue?: Date;
 8 | 	}>();
 9 | 
10 | 	if (!props.modelValue) {
11 | 		const date = new Date();
12 | 
13 | 		date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
14 | 		emit('update:modelValue', date);
15 | 	}
16 | </script>
17 | 
18 | <template>
19 | 	As of
20 | 	<input
21 | 		type="date"
22 | 		:valueAsDate="modelValue"
23 | 		@change="$emit('update:modelValue', ($event.target as HTMLInputElement).valueAsDate || undefined)"
24 | 	/>
25 | </template>
26 | 
27 | <style scoped>
28 | 	input {
29 | 		margin-bottom: 1em;
30 | 	}
31 | </style>
32 | 


--------------------------------------------------------------------------------
/src/assets/table.css:
--------------------------------------------------------------------------------
 1 | .table {
 2 | 	display: grid;
 3 | 	white-space: nowrap;
 4 | 	overflow-x: auto;
 5 | 	margin-bottom: 1em;
 6 | 	line-height: 1.5;
 7 | }
 8 | 
 9 | .table > :deep(:not(.start)) {
10 | 	padding-left: 0.25em;
11 | }
12 | 
13 | .table > :deep(:not(.end)) {
14 | 	padding-right: 0.25em;
15 | }
16 | 
17 | .table .header {
18 | 	font-weight: bold;
19 | 	border-bottom: 1px solid black;
20 | }
21 | 
22 | .table h2 {
23 | 	margin: 0.5em 0;
24 | }
25 | 
26 | .table :deep(.border),
27 | .table .header {
28 | 	border-bottom: 1px solid black;
29 | 	padding-bottom: 0.5em;
30 | 	margin-bottom: 0.5em;
31 | }
32 | 
33 | .table :deep(.value) {
34 | 	text-align: right;
35 | }
36 | 
37 | .table :deep(.pre-total) {
38 | 	border-bottom: 1px solid black;
39 | }
40 | 
41 | .table :deep(.total) {
42 | 	border-bottom: 3px double black;
43 | }


--------------------------------------------------------------------------------
/src/components/DeleteBook.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import { useBookStore } from '@/stores/books';
 3 | 	import { useAccountStore } from '@/stores/accounts';
 4 | 	import { useTransactionStore } from '@/stores/transactions';
 5 | 
 6 | 	const emit = defineEmits<{
 7 | 		(e: 'error', error: string): void;
 8 | 		(e: 'success'): void;
 9 | 	}>();
10 | 
11 | 	const props = defineProps<{
12 | 		number: UUID;
13 | 	}>();
14 | 
15 | 	const accounts = useAccountStore();
16 | 	const transactions = useTransactionStore();
17 | 	const books = useBookStore();
18 | 
19 | 	function submit() {
20 | 		accounts.removeByBook(props.number);
21 | 		transactions.removeByBook(props.number);
22 | 		books.removeBook(props.number);
23 | 
24 | 		emit('success');
25 | 	}
26 | 
27 | 	defineExpose({ submit });
28 | </script>
29 | 
30 | <template>Are you sure you want to delete this book?</template>
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "accounting",
 3 | 	"version": "0.0.0",
 4 | 	"scripts": {
 5 | 		"dev": "vite",
 6 | 		"build": "vue-tsc --noEmit && vite build",
 7 | 		"preview": "vite preview --port 5050",
 8 | 		"typecheck": "vue-tsc --noEmit",
 9 | 		"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
10 | 	},
11 | 	"dependencies": {
12 | 		"pinia": "^2.1.7",
13 | 		"vue": "^3.4.15",
14 | 		"vue-router": "^4.2.5"
15 | 	},
16 | 	"devDependencies": {
17 | 		"@types/node": "^22.5.5",
18 | 		"@vitejs/plugin-vue": "^5.0.3",
19 | 		"@vitejs/plugin-vue-jsx": "^4.0.1",
20 | 		"@vue/eslint-config-prettier": "^9.0.0",
21 | 		"@vue/eslint-config-typescript": "^13.0.0",
22 | 		"@vue/tsconfig": "^0.5.1",
23 | 		"eslint": "^8.56.0",
24 | 		"eslint-plugin-vue": "^9.20.1",
25 | 		"prettier": "^3.2.4",
26 | 		"typescript": "^5.3.3",
27 | 		"vite": "^6.3.5",
28 | 		"vue-tsc": "^2.1.6"
29 | 	}
30 | }
31 | 


--------------------------------------------------------------------------------
/src/views/BalanceSheetView.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import BalanceSheetColumn from '@/components/BalanceSheetColumn.vue';
 3 | 	import TopDate from '@/components/TopDate.vue';
 4 | 	import { AccountType } from '@/data/accountTypes';
 5 | 	import type { TimeRange } from '@/stores/transactions';
 6 | 	import { ref } from 'vue';
 7 | 
 8 | 	const timeRange = ref<TimeRange>({});
 9 | </script>
10 | 
11 | <template>
12 | 	<TopDate v-model="timeRange.end" />
13 | 	<div class="balance-sheets">
14 | 		<BalanceSheetColumn :types="[AccountType.Asset]" :time-range="timeRange" />
15 | 		<BalanceSheetColumn
16 | 			:types="[AccountType.Liability, AccountType.Equity]"
17 | 			:time-range="timeRange"
18 | 		/>
19 | 	</div>
20 | </template>
21 | 
22 | <style scoped>
23 | 	.balance-sheets {
24 | 		display: flex;
25 | 		align-items: start;
26 | 		gap: 2em;
27 | 	}
28 | 
29 | 	@media (max-width: 400px) {
30 | 		.balance-sheets {
31 | 			gap: 1em;
32 | 		}
33 | 	}
34 | </style>
35 | 


--------------------------------------------------------------------------------
/src/components/DeleteAccount.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import { useTransactionStore } from '@/stores/transactions';
 3 | 	import { useAccountStore } from '@/stores/accounts';
 4 | 	import { useRoute } from 'vue-router';
 5 | 
 6 | 	const emit = defineEmits<{
 7 | 		(e: 'error', error: string): void;
 8 | 		(e: 'success'): void;
 9 | 	}>();
10 | 
11 | 	const props = defineProps<{
12 | 		number: UUID;
13 | 	}>();
14 | 
15 | 	const transactions = useTransactionStore();
16 | 	const accounts = useAccountStore();
17 | 	const book = useRoute().params.book as UUID;
18 | 
19 | 	function submit() {
20 | 		if (transactions.getChangesForAccount(book, props.number).length) {
21 | 			emit('error', 'Account is used in transactions');
22 | 			return;
23 | 		}
24 | 
25 | 		accounts.removeAccount(book, props.number);
26 | 
27 | 		emit('success');
28 | 	}
29 | 
30 | 	defineExpose({ submit });
31 | </script>
32 | 
33 | <template>Are you sure you want to delete this account?</template>
34 | 


--------------------------------------------------------------------------------
/src/assets/main.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 | 	--secondary-bg: #f4f4f4;
 3 | 	--accent: #5e9aff;
 4 | 	--dark-accent: #1e68e7;
 5 | 	--border-color: #999;
 6 | }
 7 | 
 8 | body {
 9 | 	font-family: sans-serif;
10 | 	margin: 0;
11 | }
12 | 
13 | h1,
14 | .logo {
15 | 	font-family: serif;
16 | }
17 | 
18 | a {
19 | 	color: var(--dark-accent);
20 | }
21 | 
22 | fieldset {
23 | 	border: 1px solid var(--border-color);
24 | 	border-radius: 2px;
25 | 	margin: 0;
26 | }
27 | 
28 | input,
29 | select {
30 | 	border: none;
31 | 	background: var(--secondary-bg);
32 | 	border-bottom: 1px solid var(--border-color);
33 | 	padding: 0.25em;
34 | }
35 | 
36 | button {
37 | 	border: none;
38 | 	background: #dddddd;
39 | 	color: black;
40 | 	padding: 0.5em 0.75em;
41 | 	border-radius: 4px;
42 | 	cursor: pointer;
43 | }
44 | 
45 | button.progressive {
46 | 	background: var(--accent);
47 | 	color: white;
48 | }
49 | 
50 | button.destructive {
51 | 	background: #d40d0d;
52 | 	color: white;
53 | }


--------------------------------------------------------------------------------
/src/components/AddBook.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import { ref } from 'vue';
 3 | 	import { useBookStore } from '@/stores/books';
 4 | 	import LabeledInput from '@/components/LabeledInput.vue';
 5 | 
 6 | 	const emit = defineEmits<{
 7 | 		(e: 'error', error: string): void;
 8 | 		(e: 'success'): void;
 9 | 	}>();
10 | 
11 | 	const props = defineProps<{
12 | 		number?: UUID;
13 | 	}>();
14 | 
15 | 	const books = useBookStore();
16 | 	const book =
17 | 		props.number === undefined ? undefined : books.byNumber(props.number);
18 | 	const name = ref<string>(book?.name ?? '');
19 | 
20 | 	function submit() {
21 | 		if (!name.value) {
22 | 			emit('error', 'No name');
23 | 			return;
24 | 		}
25 | 
26 | 		books.addBook({
27 | 			number: props.number,
28 | 			name: name.value
29 | 		});
30 | 
31 | 		emit('success');
32 | 	}
33 | 
34 | 	defineExpose({ submit });
35 | </script>
36 | 
37 | <template>
38 | 	<LabeledInput type="text" label="Name" v-model:value.trim="name" />
39 | </template>
40 | 


--------------------------------------------------------------------------------
/src/data/accountTypes.ts:
--------------------------------------------------------------------------------
 1 | export enum AccountType {
 2 | 	Asset,
 3 | 	Liability,
 4 | 	Equity,
 5 | 	Revenue,
 6 | 	Expense
 7 | }
 8 | 
 9 | export type AccountTypeInfo = {
10 | 	type: AccountType;
11 | 	name: string;
12 | 	multiplier: -1 | 1;
13 | };
14 | 
15 | export const accountTypes: { [key in AccountType]: AccountTypeInfo } = {
16 | 	[AccountType.Asset]: {
17 | 		type: AccountType.Asset,
18 | 		name: 'Assets',
19 | 		multiplier: 1
20 | 	},
21 | 	[AccountType.Liability]: {
22 | 		type: AccountType.Liability,
23 | 		name: 'Liabilities',
24 | 		multiplier: -1
25 | 	},
26 | 	[AccountType.Equity]: {
27 | 		type: AccountType.Equity,
28 | 		name: 'Equity',
29 | 		multiplier: -1
30 | 	},
31 | 	[AccountType.Revenue]: {
32 | 		type: AccountType.Revenue,
33 | 		name: 'Revenues',
34 | 		multiplier: -1
35 | 	},
36 | 	[AccountType.Expense]: {
37 | 		type: AccountType.Expense,
38 | 		name: 'Expenses',
39 | 		multiplier: 1
40 | 	}
41 | };
42 | 
43 | export const incomeParentType = AccountType.Equity;
44 | export const incomeAccountTypes = [AccountType.Revenue, AccountType.Expense];
45 | 


--------------------------------------------------------------------------------
/src/components/FigureInput.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import { AccountType, accountTypes } from '@/data/accountTypes';
 3 | 	import LabeledInput from '@/components/LabeledInput.vue';
 4 | 
 5 | 	defineEmits<{
 6 | 		(event: 'update:value', value: number): void;
 7 | 	}>();
 8 | 
 9 | 	const props = defineProps<{
10 | 		value: number;
11 | 		multiplier?: number;
12 | 		accountType?: AccountType;
13 | 		label?: string;
14 | 	}>();
15 | 
16 | 	const multiplier =
17 | 		props.multiplier ??
18 | 		(props.accountType !== undefined
19 | 			? accountTypes[props.accountType as AccountType].multiplier
20 | 			: 1);
21 | </script>
22 | 
23 | <template>
24 | 	<LabeledInput
25 | 		type="number"
26 | 		:value="value * multiplier"
27 | 		@update:value="(value: number) => $emit('update:value', value * multiplier)"
28 | 	>
29 | 		<template v-slot:label>
30 | 			<span
31 | 				:class="multiplier === 1 ? 'dr' : 'cr'"
32 | 				:title="multiplier === 1 ? 'Debit account' : 'Credit account'"
33 | 			>
34 | 				{{ label }}
35 | 			</span>
36 | 		</template>
37 | 	</LabeledInput>
38 | </template>
39 | 
40 | <style scoped>
41 | 	.dr {
42 | 		color: green;
43 | 	}
44 | 
45 | 	.cr {
46 | 		color: red;
47 | 	}
48 | </style>
49 | 


--------------------------------------------------------------------------------
/src/components/LedgerEntry.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import type { DatedChange } from '@/stores/transactions';
 3 | 	import { useRoute, RouterLink } from 'vue-router';
 4 | 	import Figure from '@/components/Figure.vue';
 5 | 
 6 | 	defineProps<{
 7 | 		change: DatedChange;
 8 | 	}>();
 9 | 
10 | 	const book = parseInt(useRoute().params.book as string);
11 | </script>
12 | 
13 | <template>
14 | 	<div class="start border">
15 | 		{{ change.date.getUTCFullYear() }}-{{
16 | 			(change.date.getUTCMonth() + 1).toString().padStart(2, '0')
17 | 		}}-{{ change.date.getUTCDate().toString().padStart(2, '0') }}
18 | 	</div>
19 | 	<div class="border"></div>
20 | 	<div class="border">
21 | 		<RouterLink :to="{ name: 'journal', params: { book } }">J1</RouterLink>
22 | 	</div>
23 | 	<div class="value border">
24 | 		<Figure v-if="change.amount > 0" :value="change.amount" />
25 | 	</div>
26 | 	<div class="value border">
27 | 		<Figure v-if="change.amount < 0" :value="-change.amount" />
28 | 	</div>
29 | 	<div class="border">
30 | 		<template v-if="change.total >= 0">Dr</template>
31 | 		<template v-else>Cr</template>
32 | 	</div>
33 | 	<div class="value border end">
34 | 		<Figure :value="Math.abs(change.total)" />
35 | 	</div>
36 | </template>


--------------------------------------------------------------------------------
/src/components/BookNav.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import { RouterLink, useRoute } from 'vue-router';
 3 | 	import { useBookStore } from '@/stores/books';
 4 | 	import ChevronIcon from '@/components/ChevronIcon.vue';
 5 | 	import FileStorage from '@/helpers/FileStorage';
 6 | 	import DownloadButton from '@/components/DownloadButton.vue';
 7 | 
 8 | 	const book = useRoute().params.book as UUID;
 9 | 	const books = useBookStore();
10 | 	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
11 | 	const name = books.byNumber(book)!.name;
12 | </script>
13 | 
14 | <template>
15 | 	<ChevronIcon />
16 | 	<span>{{ name }}</span>
17 | 	<DownloadButton @click="FileStorage.downloadBook(book)" />
18 | 	<ChevronIcon />
19 | 	<RouterLink :to="{ name: 'journal', params: { book } }">Journal</RouterLink>
20 | 	<RouterLink :to="{ name: 'ledger', params: { book } }">Ledger</RouterLink>
21 | 	<RouterLink :to="{ name: 'balancesheet', params: { book } }"
22 | 		>Balance Sheet</RouterLink
23 | 	>
24 | 	<RouterLink :to="{ name: 'incomestatement', params: { book } }"
25 | 		>Income Statement</RouterLink
26 | 	>
27 | </template>
28 | 
29 | <style scoped>
30 | 	.router-link-active {
31 | 		color: black;
32 | 		text-decoration: none;
33 | 	}
34 | </style>
35 | 


--------------------------------------------------------------------------------
/src/views/JournalView.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import { useTransactionStore } from '@/stores/transactions';
 3 | 	import { useRoute } from 'vue-router';
 4 | 	import AddEntry from '@/components/AddEntry.vue';
 5 | 	import ActionPopup from '@/components/ActionPopup.vue';
 6 | 	import JournalEntry from '@/components/JournalEntry.vue';
 7 | 
 8 | 	const transactions = useTransactionStore();
 9 | 	const book = useRoute().params.book as UUID;
10 | </script>
11 | 
12 | <template>
13 | 	<div class="table journal">
14 | 		<div class="header" style="grid-column: 1 / span 2">Date</div>
15 | 		<div class="header">Particulars</div>
16 | 		<div class="header">P.R.</div>
17 | 		<div class="header value">Debit</div>
18 | 		<div class="header value">Credit</div>
19 | 		<JournalEntry
20 | 			v-for="transaction in transactions.byBook(book)"
21 | 			:transaction="transaction"
22 | 			:key="transaction.number"
23 | 		/>
24 | 	</div>
25 | 	<ActionPopup
26 | 		:type="AddEntry"
27 | 		toggleText="Add Transaction"
28 | 		titleText="Create Transaction"
29 | 		submitText="Create"
30 | 	/>
31 | </template>
32 | 
33 | <style scoped>
34 | 	@import url('@/assets/table.css');
35 | 
36 | 	.journal {
37 | 		grid-template-columns: max-content 2fr 8fr 1fr 2fr 2fr;
38 | 		max-width: 52em;
39 | 	}
40 | </style>
41 | 


--------------------------------------------------------------------------------
/src/stores/books.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia';
 2 | import { ref, watch } from 'vue';
 3 | import parseObject from '@/helpers/parseObject';
 4 | 
 5 | export interface BookData {
 6 | 	number: UUID;
 7 | 	name: string;
 8 | }
 9 | 
10 | export const useBookStore = defineStore('books', () => {
11 | 	const books = ref(parseObject<BookData[]>(localStorage.getItem('books') ?? '[]'));
12 | 
13 | 	watch(
14 | 		books,
15 | 		() => localStorage.setItem('books', JSON.stringify(books.value)),
16 | 		{ deep: true }
17 | 	);
18 | 
19 | 	function byNumber(number: UUID) {
20 | 		return books.value.find(book => book.number === number);
21 | 	}
22 | 
23 | 	function addBook(data: Omit<BookData, 'number'> & { number?: UUID }) {
24 | 		if (data.number) {
25 | 			const index = books.value.findIndex(book => book.number === data.number);
26 | 
27 | 			books.value[index] = data as BookData;
28 | 
29 | 			return data.number;
30 | 		}
31 | 
32 | 		const number = crypto.randomUUID();
33 | 
34 | 		books.value.push({ ...data, number });
35 | 
36 | 		return number;
37 | 	}
38 | 
39 | 	function removeBook(number: UUID) {
40 | 		books.value = books.value.filter(book => book.number !== number);
41 | 	}
42 | 
43 | 	return {
44 | 		books,
45 | 		byNumber,
46 | 		addBook,
47 | 		removeBook
48 | 	};
49 | });
50 | 


--------------------------------------------------------------------------------
/src/components/LabeledInput.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	defineEmits<{
 3 | 		(event: 'update:value', value: any): void;
 4 | 		(event: 'button'): void;
 5 | 	}>();
 6 | 
 7 | 	defineProps<{
 8 | 		type?: string;
 9 | 		label?: string;
10 | 		value?: unknown;
11 | 		flex?: boolean;
12 | 		button?: string;
13 | 	}>();
14 | </script>
15 | 
16 | <template>
17 | 	<div class="container">
18 | 		<label class="label">
19 | 			<slot name="label">
20 | 				<span v-if="label">{{ label }}</span>
21 | 			</slot>
22 | 			<span class="input">
23 | 				<slot>
24 | 					<input
25 | 						:type="type"
26 | 						:value="value"
27 | 						@input="$emit('update:value', ($event.target as HTMLInputElement).value)"
28 | 					/>
29 | 				</slot>
30 | 			</span>
31 | 		</label>
32 | 		<button v-if="button" @click="$emit('button')" class="button">
33 | 			{{ button }}
34 | 		</button>
35 | 	</div>
36 | </template>
37 | 
38 | <style scoped>
39 | 	.container {
40 | 		display: flex;
41 | 		align-items: center;
42 | 	}
43 | 
44 | 	.label {
45 | 		flex: 1;
46 | 		display: flex;
47 | 		margin: 0.5em 0;
48 | 		align-items: center;
49 | 	}
50 | 
51 | 	.label > :not(:last-child),
52 | 	.label > :slotted(:not(:last-child)) {
53 | 		margin-right: 0.5em;
54 | 	}
55 | 
56 | 	.button {
57 | 		margin-left: 0.5em;
58 | 	}
59 | 
60 | 	.input {
61 | 		display: flex;
62 | 		flex: 1;
63 | 	}
64 | 
65 | 	.input *,
66 | 	.input :slotted(*) {
67 | 		flex: 1;
68 | 	}
69 | </style>
70 | 


--------------------------------------------------------------------------------
/src/components/AccountsTotal.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import {
 3 | 		AccountType,
 4 | 		incomeParentType,
 5 | 		incomeAccountTypes
 6 | 	} from '@/data/accountTypes';
 7 | 	import { useAccountStore } from '@/stores/accounts';
 8 | 	import { useTransactionStore, type TimeRange } from '@/stores/transactions';
 9 | 	import Figure from '@/components/Figure.vue';
10 | 	import TypeTotal from './TypeTotal.vue';
11 | 
12 | 	const props = defineProps<{
13 | 		book: UUID;
14 | 		type: AccountType;
15 | 		timeRange?: TimeRange;
16 | 		threeColEmpty?: number;
17 | 	}>();
18 | 
19 | 	const accounts = useAccountStore();
20 | 	const transactions = useTransactionStore();
21 | 	const accountsOfType = accounts.byType(props.book, props.type);
22 | 	const includeIncome = props.type == incomeParentType;
23 | </script>
24 | 
25 | <template>
26 | 	<template v-for="(account, index) in accountsOfType" :key="account.number">
27 | 		<div>{{ account.name }}</div>
28 | 		<div v-if="threeColEmpty === 2"></div>
29 | 		<div
30 | 			:class="`value ${
31 | 				!includeIncome && index == accountsOfType.length - 1 ? 'pre-total' : ''
32 | 			}`"
33 | 		>
34 | 			<Figure
35 | 				:value="
36 | 					transactions.getTotalForAccount(book, account.number, timeRange)
37 | 				"
38 | 				:accountType="account.type"
39 | 			/>
40 | 		</div>
41 | 		<div v-if="threeColEmpty === 3"></div>
42 | 	</template>
43 | 	<TypeTotal
44 | 		v-if="includeIncome"
45 | 		imaginary
46 | 		valueClass="pre-total"
47 | 		:book="book"
48 | 		:type="incomeAccountTypes"
49 | 		name="Pending Retained Earnings"
50 | 		:time-range="timeRange"
51 | 	/>
52 | </template>
53 | 


--------------------------------------------------------------------------------
/src/components/TypeTotal.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import {
 3 | 		AccountType,
 4 | 		accountTypes,
 5 | 		incomeAccountTypes,
 6 | 		incomeParentType
 7 | 	} from '@/data/accountTypes';
 8 | 	import { useTransactionStore, type TimeRange } from '@/stores/transactions';
 9 | 	import Figure from '@/components/Figure.vue';
10 | 	import { computed } from 'vue';
11 | 
12 | 	const props = defineProps<{
13 | 		book: UUID;
14 | 		type: AccountType | AccountType[];
15 | 		name: string;
16 | 		timeRange?: TimeRange;
17 | 		valueClass?: string;
18 | 		totalDepth?: number;
19 | 		threeColEmpty?: number;
20 | 		imaginary?: boolean;
21 | 	}>();
22 | 
23 | 	const transactions = useTransactionStore();
24 | 	const types = typeof props.type === 'number' ? [props.type] : props.type;
25 | 
26 | 	if (types.includes(incomeParentType)) types.push(...incomeAccountTypes);
27 | 
28 | 	const value = computed(() =>
29 | 		transactions.getTotalForAccountType(props.book, types, props.timeRange)
30 | 	);
31 | </script>
32 | 
33 | <template>
34 | 	<template v-if="!imaginary || value">
35 | 		<div :class="`total-${totalDepth || 0} ${imaginary ? 'imaginary' : ''}`">{{ name }}</div>
36 | 		<div v-if="threeColEmpty === 2"></div>
37 | 		<div :class="`value ${valueClass}`">
38 | 			<Figure
39 | 				:value="value"
40 | 				:multiplier="accountTypes[types[0]].multiplier"
41 | 			/>
42 | 		</div>
43 | 		<div v-if="threeColEmpty === 3"></div>
44 | 	</template>
45 | </template>
46 | 
47 | <style>
48 | 	.imaginary {
49 | 		font-style: italic;
50 | 	}
51 | 
52 | 	.total-1 {
53 | 		margin-left: 0.75em;
54 | 	}
55 | 
56 | 	.total-2 {
57 | 		margin-left: 1.5em;
58 | 	}
59 | </style>
60 | 


--------------------------------------------------------------------------------
/src/views/LedgerListView.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import { useAccountStore } from '@/stores/accounts';
 3 | 	import { RouterLink, useRoute } from 'vue-router';
 4 | 	import DeleteButton from '@/components/DeleteButton.vue';
 5 | 	import ActionPopup from '@/components/ActionPopup.vue';
 6 | 	import EditButton from '@/components/EditButton.vue';
 7 | 	import DeleteAccount from '@/components/DeleteAccount.vue';
 8 | 	import AddAccount from '@/components/AddAccount.vue';
 9 | import Actions from '@/components/Actions.vue';
10 | 
11 | 	const accounts = useAccountStore();
12 | 	const book = useRoute().params.book as UUID;
13 | </script>
14 | 
15 | <template>
16 | 	<div class="container">
17 | 		<div
18 | 			v-for="account in accounts.byBook(book)"
19 | 			:key="account.number"
20 | 			class="account"
21 | 		>
22 | 			<RouterLink
23 | 				:to="{ name: 'ledgeraccount', params: { account: account.number } }"
24 | 				class="link"
25 | 			>
26 | 				{{ account.name }} #{{ account.userNumber }}
27 | 			</RouterLink>
28 | 			<Actions>
29 | 				<ActionPopup
30 | 					:type="DeleteAccount"
31 | 					:number="account.number"
32 | 					titleText="Delete Account"
33 | 					submitText="Delete"
34 | 					destructive
35 | 				>
36 | 					<DeleteButton />
37 | 				</ActionPopup>
38 | 				<ActionPopup
39 | 					:type="AddAccount"
40 | 					:number="account.number"
41 | 					titleText="Edit Account"
42 | 					submitText="Save"
43 | 				>
44 | 					<EditButton />
45 | 				</ActionPopup>
46 | 			</Actions>
47 | 		</div>
48 | 	</div>
49 | 	<ActionPopup
50 | 		:type="AddAccount"
51 | 		toggleText="Add Account"
52 | 		titleText="Create Account"
53 | 		submitText="Create"
54 | 	/>
55 | </template>
56 | 
57 | <style scoped>
58 | 	.account {
59 | 		display: flex;
60 | 		align-items: center;
61 | 		padding: 0.25em 0;
62 | 	}
63 | 
64 | 	.account:not(:last-child) {
65 | 		margin-bottom: 0.5em;
66 | 	}
67 | 
68 | 	.link {
69 | 		margin-right: 1em;
70 | 	}
71 | 
72 | 	.container {
73 | 		margin-bottom: 1em;
74 | 	}
75 | </style>
76 | 


--------------------------------------------------------------------------------
/src/components/BalanceSheetColumn.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import {
 3 | 		AccountType,
 4 | 		accountTypes,
 5 | 		incomeParentType,
 6 | 		incomeAccountTypes
 7 | 	} from '@/data/accountTypes';
 8 | 	import { useRoute } from 'vue-router';
 9 | 	import AccountsTotal from '@/components/AccountsTotal.vue';
10 | 	import TypeTotal from '@/components/TypeTotal.vue';
11 | 	import type { TimeRange } from '@/stores/transactions';
12 | 
13 | 	const props = defineProps<{
14 | 		types: AccountType[];
15 | 		timeRange: TimeRange;
16 | 	}>();
17 | 
18 | 	const book = useRoute().params.book as UUID;
19 | 	const typeInfos = props.types.map(type => accountTypes[type]);
20 | </script>
21 | 
22 | <template>
23 | 	<div class="table balance-sheet">
24 | 		<template v-for="(accountType, index) in typeInfos" :key="accountType.name">
25 | 			<h2>{{ accountType.name }}</h2>
26 | 			<AccountsTotal
27 | 				:book="book"
28 | 				:type="accountType.type"
29 | 				:time-range="timeRange"
30 | 			/>
31 | 			<TypeTotal
32 | 				v-if="typeInfos.length > 1"
33 | 				:valueClass="index === typeInfos.length - 1 ? 'pre-total' : ''"
34 | 				:book="book"
35 | 				:type="
36 | 					accountType.type === incomeParentType
37 | 						? [...incomeAccountTypes, accountType.type]
38 | 						: accountType.type
39 | 				"
40 | 				:name="`Total ${accountType.name}`"
41 | 				:time-range="timeRange"
42 | 				:totalDepth="1"
43 | 			/>
44 | 		</template>
45 | 		<TypeTotal
46 | 			valueClass="total"
47 | 			:book="book"
48 | 			:type="typeInfos.map(typeInfo => typeInfo.type)"
49 | 			:name="`Total ${typeInfos
50 | 				.map(accountType => accountType.name)
51 | 				.join(' and ')}`"
52 | 			:time-range="timeRange"
53 | 			:totalDepth="typeInfos.length > 1 ? 2 : 1"
54 | 		/>
55 | 	</div>
56 | </template>
57 | 
58 | <style scoped>
59 | 	@import url('@/assets/table.css');
60 | 
61 | 	.balance-sheet {
62 | 		grid-template-columns: 4fr 1fr;
63 | 		max-width: 32em;
64 | 		flex: 0 1 100%;
65 | 	}
66 | 
67 | 	.balance-sheet h2 {
68 | 		grid-column: 1 / 3;
69 | 		margin-top: 1em;
70 | 	}
71 | 
72 | 	.balance-sheet h2:first-child {
73 | 		margin-top: 0;
74 | 	}
75 | </style>
76 | 


--------------------------------------------------------------------------------
/src/views/BookListView.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import { useBookStore } from '@/stores/books';
 3 | 	import AddBook from '@/components/AddBook.vue';
 4 | 	import DeleteBook from '@/components/DeleteBook.vue';
 5 | 	import ActionPopup from '@/components/ActionPopup.vue';
 6 | 	import EditButton from '@/components/EditButton.vue';
 7 | 	import DeleteButton from '@/components/DeleteButton.vue';
 8 | 	import DownloadButton from '@/components/DownloadButton.vue';
 9 | 	import { RouterLink } from 'vue-router';
10 | 	import FileStorage from '@/helpers/FileStorage';
11 | 	import Actions from '@/components/Actions.vue';
12 | 
13 | 	const books = useBookStore();
14 | </script>
15 | 
16 | <template>
17 | 	<div class="books">
18 | 		<div v-for="book in books.books" :key="book.number" class="book">
19 | 			<RouterLink
20 | 				:to="{ name: 'book', params: { book: book.number } }"
21 | 				class="link"
22 | 			>
23 | 				{{ book.name }}
24 | 			</RouterLink>
25 | 			<Actions>
26 | 				<ActionPopup
27 | 					:type="DeleteBook"
28 | 					:number="book.number"
29 | 					titleText="Delete Book"
30 | 					submitText="Delete"
31 | 					destructive
32 | 				>
33 | 					<DeleteButton />
34 | 				</ActionPopup>
35 | 				<ActionPopup
36 | 					:type="AddBook"
37 | 					:number="book.number"
38 | 					titleText="Edit Book"
39 | 					submitText="Save"
40 | 				>
41 | 					<EditButton />
42 | 				</ActionPopup>
43 | 				<DownloadButton @click="FileStorage.downloadBook(book.number)" />
44 | 			</Actions>
45 | 		</div>
46 | 	</div>
47 | 	<div>
48 | 		<ActionPopup
49 | 			:type="AddBook"
50 | 			toggleText="Create Book"
51 | 			titleText="Create Book"
52 | 			submitText="Create"
53 | 		/>
54 | 		<button class="upload" @click="FileStorage.uploadBook()">Upload Book</button>
55 | 	</div>
56 | </template>
57 | 
58 | <style scoped>
59 | 	.book {
60 | 		display: flex;
61 | 		align-items: center;
62 | 		padding: 0.25em 0;
63 | 	}
64 | 
65 | 	.book:not(:last-child) {
66 | 		margin-bottom: 0.5em;
67 | 	}
68 | 
69 | 	.link {
70 | 		margin-right: 1em;
71 | 	}
72 | 
73 | 	.books {
74 | 		margin-bottom: 1em;
75 | 	}
76 | 
77 | 	.upload {
78 | 		margin-left: 1em;
79 | 	}
80 | </style>
81 | 


--------------------------------------------------------------------------------
/src/stores/accounts.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia';
 2 | import type { AccountType } from '@/data/accountTypes';
 3 | import { ref, watch } from 'vue';
 4 | import parseObject from '@/helpers/parseObject';
 5 | 
 6 | export interface AccountData {
 7 | 	number: UUID;
 8 | 	book: UUID;
 9 | 	userNumber: string;
10 | 	name: string;
11 | 	type: AccountType;
12 | }
13 | 
14 | export const useAccountStore = defineStore('accounts', () => {
15 | 	const accounts = ref(parseObject<AccountData[]>(localStorage.getItem('accounts') ?? '[]'));
16 | 
17 | 	ref<AccountData[]>(
18 | 		JSON.parse(localStorage.getItem('accounts') || '[]')
19 | 	);
20 | 
21 | 	watch(
22 | 		accounts,
23 | 		() => localStorage.setItem('accounts', JSON.stringify(accounts.value)),
24 | 		{ deep: true }
25 | 	);
26 | 
27 | 	function byBook(book: UUID) {
28 | 		return accounts.value.filter(account => account.book === book);
29 | 	}
30 | 
31 | 	function byNumber(book: UUID, number: UUID) {
32 | 		return byBook(book).find(account => account.number === number);
33 | 	}
34 | 
35 | 	function byType(book: UUID, type: AccountType) {
36 | 		return byBook(book).filter(account => account.type === type);
37 | 	}
38 | 
39 | 	function addAccount(data: Omit<AccountData, 'number'> & { number?: UUID }) {
40 | 		if (data.number) removeAccount(data.book, data.number);
41 | 
42 | 		const accountsInBook = byBook(data.book);
43 | 		const number = data.number ?? crypto.randomUUID();
44 | 
45 | 		let index = accountsInBook.findIndex(
46 | 			account => account.userNumber > data.userNumber
47 | 		);
48 | 
49 | 		index = index == -1 ? accountsInBook.length : index;
50 | 
51 | 		accounts.value.splice(index, 0, { ...data, number });
52 | 	}
53 | 
54 | 	function removeAccount(book: UUID, number: UUID) {
55 | 		accounts.value = accounts.value.filter(
56 | 			account => account.book !== book || account.number !== number
57 | 		);
58 | 	}
59 | 
60 | 	function removeByBook(book: UUID) {
61 | 		accounts.value = accounts.value.filter(account => account.book !== book);
62 | 	}
63 | 
64 | 	return {
65 | 		accounts,
66 | 		byBook,
67 | 		byNumber,
68 | 		byType,
69 | 		addAccount,
70 | 		removeAccount,
71 | 		removeByBook
72 | 	};
73 | });
74 | 


--------------------------------------------------------------------------------
/src/components/AddAccount.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import { useAccountStore } from '@/stores/accounts';
 3 | 	import { ref } from 'vue';
 4 | 	import { useRoute } from 'vue-router';
 5 | 	import { AccountType, accountTypes } from '@/data/accountTypes';
 6 | 	import LabeledInput from '@/components/LabeledInput.vue';
 7 | 
 8 | 	const emit = defineEmits<{
 9 | 		(e: 'error', error: string): void;
10 | 		(e: 'success'): void;
11 | 	}>();
12 | 
13 | 	const props = defineProps<{
14 | 		number?: UUID;
15 | 	}>();
16 | 
17 | 	const accounts = useAccountStore();
18 | 	const book = useRoute().params.book as UUID;
19 | 
20 | 	const account =
21 | 		props.number === undefined
22 | 			? undefined
23 | 			: accounts.byNumber(book, props.number);
24 | 
25 | 	const name = ref<string>(account?.name ?? '');
26 | 	const userNumber = ref<string>(account?.userNumber ?? '');
27 | 	const type = ref<AccountType>(account?.type || AccountType.Asset);
28 | 
29 | 	function submit() {
30 | 		if (!name.value) {
31 | 			emit('error', 'No name');
32 | 			return;
33 | 		}
34 | 
35 | 		if (!userNumber.value) {
36 | 			emit('error', 'No number');
37 | 			return;
38 | 		}
39 | 
40 | 		if (type.value === undefined) {
41 | 			emit('error', 'No type');
42 | 			return;
43 | 		}
44 | 
45 | 		if (
46 | 			accounts
47 | 				.byBook(book)
48 | 				.some(account =>
49 | 					props.number && props.number === account.number
50 | 						? false
51 | 						: account.userNumber === userNumber.value ||
52 | 						  account.name === name.value
53 | 				)
54 | 		) {
55 | 			emit('error', 'Account with that name or number already exists');
56 | 			return;
57 | 		}
58 | 
59 | 		accounts.addAccount({
60 | 			book,
61 | 			number: props.number,
62 | 			userNumber: userNumber.value,
63 | 			name: name.value,
64 | 			type: type.value
65 | 		});
66 | 
67 | 		emit('success');
68 | 	}
69 | 
70 | 	defineExpose({ submit });
71 | </script>
72 | 
73 | <template>
74 | 	<LabeledInput v-model:value.trim="name" label="Name" />
75 | 	<LabeledInput v-model:value.trim="userNumber" label="Number" />
76 | 	<LabeledInput label="Type">
77 | 		<select v-model.number="type">
78 | 			<option
79 | 				v-for="accountType in Object.values(accountTypes)"
80 | 				:key="accountType.type"
81 | 				:value="accountType.type"
82 | 			>
83 | 				{{ accountType.name }}
84 | 			</option>
85 | 		</select>
86 | 	</LabeledInput>
87 | </template>
88 | 


--------------------------------------------------------------------------------
/src/helpers/FileStorage.ts:
--------------------------------------------------------------------------------
 1 | import { useTransactionStore } from '@/stores/transactions';
 2 | import { useBookStore } from '@/stores/books';
 3 | import { useAccountStore } from '@/stores/accounts';
 4 | 
 5 | import type { BookData } from '@/stores/books';
 6 | import type { TransactionData } from '@/stores/transactions';
 7 | import type { AccountData } from '@/stores/accounts';
 8 | import parseObject from '@/helpers/parseObject';
 9 | 
10 | export default class FileStorage {
11 | 	static downloadBook(book: UUID) {
12 | 		const transactions = useTransactionStore();
13 | 		const books = useBookStore();
14 | 		const accounts = useAccountStore();
15 | 
16 | 		const data = {
17 | 			book: books.byNumber(book)!,
18 | 			accounts: accounts.byBook(book),
19 | 			transactions: transactions.byBook(book)
20 | 		};
21 | 
22 | 		const blob = new Blob([JSON.stringify(data)], { type: 'text/json' });
23 | 
24 | 		const el = document.createElement('a');
25 | 		el.href = URL.createObjectURL(blob);
26 | 		el.download = data.book.name + '.bb';
27 | 
28 | 		document.body.appendChild(el);
29 | 		el.click();
30 | 		document.body.removeChild(el);
31 | 	}
32 | 
33 | 	static uploadBook() {
34 | 		const el = document.createElement('input');
35 | 
36 | 		el.type = 'file';
37 | 		el.accept = '.bb';
38 | 		el.click();
39 | 
40 | 		return new Promise(resolve =>
41 | 			el.addEventListener('change', _ => {
42 | 				const file = el?.files?.[0];
43 | 
44 | 				if (!file) return;
45 | 
46 | 				resolve(FileStorage.uploadBookWithFile(file));
47 | 			})
48 | 		);
49 | 	}
50 | 
51 | 	static async uploadBookWithFile(file: File) {
52 | 		const transactions = useTransactionStore();
53 | 		const books = useBookStore();
54 | 		const accounts = useAccountStore();
55 | 
56 | 		const text = await file.text();
57 | 		const {
58 | 			book: bookData,
59 | 			transactions: transactionsData,
60 | 			accounts: accountsData
61 | 		}: {
62 | 			book: Omit<BookData, 'number'> & { number: UUID | undefined }; // Support old format
63 | 			transactions: TransactionData[];
64 | 			accounts: AccountData[];
65 | 		} = parseObject(text);
66 | 
67 | 		const book = books.addBook(bookData);
68 | 
69 | 		transactionsData.forEach(transaction => {
70 | 			transaction.date = new Date(transaction.date);
71 | 			transaction.book = book;
72 | 
73 | 			transactions.addTransaction(transaction);
74 | 		});
75 | 
76 | 		accountsData.forEach(account => {
77 | 			account.book = book;
78 | 
79 | 			accounts.addAccount(account);
80 | 		});
81 | 	}
82 | }
83 | 


--------------------------------------------------------------------------------
/src/views/LedgerView.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import { useTransactionStore } from '@/stores/transactions';
 3 | 	import { useAccountStore } from '@/stores/accounts';
 4 | 	import { useRoute } from 'vue-router';
 5 | 	import ActionPopup from '@/components/ActionPopup.vue';
 6 | 	import AddAccount from '@/components/AddAccount.vue';
 7 | 	import DeleteAccount from '@/components/DeleteAccount.vue';
 8 | 	import EditButton from '@/components/EditButton.vue';
 9 | 	import DeleteButton from '@/components/DeleteButton.vue';
10 | 	import LedgerEntry from '@/components/LedgerEntry.vue';
11 | 	import Actions from '@/components/Actions.vue';
12 | 
13 | 	const transactions = useTransactionStore();
14 | 	const accounts = useAccountStore();
15 | 	const book = useRoute().params.book as UUID;
16 | 	const account = accounts.byNumber(
17 | 		book,
18 | 		useRoute().params.account as UUID
19 | 	);
20 | </script>
21 | 
22 | <template>
23 | 	<div v-if="account === undefined">Account does not exist.</div>
24 | 	<article v-else>
25 | 		<header class="title">
26 | 			<h2>{{ account.name }} - No. {{ account.userNumber }}</h2>
27 | 			<Actions>
28 | 				<ActionPopup
29 | 					:type="DeleteAccount"
30 | 					:number="account.number"
31 | 					titleText="Delete Account"
32 | 					submitText="Delete"
33 | 					destructive
34 | 				>
35 | 					<DeleteButton />
36 | 				</ActionPopup>
37 | 				<ActionPopup
38 | 					:type="AddAccount"
39 | 					:number="account.number"
40 | 					titleText="Edit Account"
41 | 					submitText="Save"
42 | 				>
43 | 					<EditButton />
44 | 				</ActionPopup>
45 | 			</Actions>
46 | 		</header>
47 | 		<div class="table ledger">
48 | 			<div class="header start">Date</div>
49 | 			<div class="header">Particulars</div>
50 | 			<div class="header">P.R.</div>
51 | 			<div class="header value">Debit</div>
52 | 			<div class="header value">Credit</div>
53 | 			<div class="header"></div>
54 | 			<div class="header value end">Balance</div>
55 | 			<LedgerEntry
56 | 				v-for="(change, index) in transactions.getChangesForAccount(
57 | 					book,
58 | 					account.number
59 | 				)"
60 | 				:change="change"
61 | 				:key="index"
62 | 			/>
63 | 		</div>
64 | 	</article>
65 | </template>
66 | 
67 | <style scoped>
68 | 	@import url('@/assets/table.css');
69 | 
70 | 	.title {
71 | 		display: flex;
72 | 		align-items: center;
73 | 		margin-bottom: 0.5em;
74 | 	}
75 | 
76 | 	.title h2 {
77 | 		margin: 0 1rem 0 0;
78 | 	}
79 | 
80 | 	.ledger {
81 | 		grid-template-columns: 2fr 6fr 1fr 2fr 2fr max-content 2fr;
82 | 		max-width: 52em;
83 | 	}
84 | </style>
85 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
  1 | import { createRouter, createWebHistory } from 'vue-router';
  2 | 
  3 | import BookListView from '@/views/BookListView.vue';
  4 | import BookView from '@/views/BookView.vue';
  5 | import JournalView from '@/views/JournalView.vue';
  6 | import LedgerView from '@/views/LedgerView.vue';
  7 | import LedgerListView from '@/views/LedgerListView.vue';
  8 | import BalanceSheetView from '@/views/BalanceSheetView.vue';
  9 | import IncomeStatementView from '@/views/IncomeStatementView.vue';
 10 | import BookNav from '@/components/BookNav.vue';
 11 | import AboutFooter from '@/components/AboutFooter.vue';
 12 | import BookError from '@/components/BookError.vue';
 13 | import { useBookStore } from '@/stores/books';
 14 | 
 15 | const router = createRouter({
 16 | 	history: createWebHistory(import.meta.env.BASE_URL),
 17 | 	routes: [
 18 | 		{
 19 | 			path: '/',
 20 | 			name: 'home',
 21 | 			redirect: {
 22 | 				name: 'booklist'
 23 | 			}
 24 | 		},
 25 | 		{
 26 | 			path: '/books',
 27 | 			name: 'booklist',
 28 | 			component: BookListView,
 29 | 			meta: {
 30 | 				title: 'Books',
 31 | 				footer: AboutFooter
 32 | 			}
 33 | 		},
 34 | 		{
 35 | 			path: '/books/:book',
 36 | 			name: 'book',
 37 | 			component: BookView,
 38 | 			redirect: {
 39 | 				name: 'journal'
 40 | 			},
 41 | 			meta: {
 42 | 				header: BookNav
 43 | 			},
 44 | 			beforeEnter: to => {
 45 | 				const book = to.params.book as UUID;
 46 | 				const books = useBookStore();
 47 | 
 48 | 				if (!books.byNumber(book)) {
 49 | 					to.meta.title = 'Error';
 50 | 					to.meta.error = BookError;
 51 | 					delete to.meta.header;
 52 | 				}
 53 | 
 54 | 				return true;
 55 | 			},
 56 | 			children: [
 57 | 				{
 58 | 					path: 'journal',
 59 | 					name: 'journal',
 60 | 					component: JournalView,
 61 | 					meta: {
 62 | 						title: 'Journal'
 63 | 					}
 64 | 				},
 65 | 				{
 66 | 					path: 'ledger',
 67 | 					name: 'ledger',
 68 | 					component: LedgerListView,
 69 | 					meta: {
 70 | 						title: 'Ledger'
 71 | 					}
 72 | 				},
 73 | 				{
 74 | 					path: 'ledger/:account',
 75 | 					name: 'ledgeraccount',
 76 | 					component: LedgerView,
 77 | 					meta: {
 78 | 						title: 'Ledger'
 79 | 					}
 80 | 				},
 81 | 				{
 82 | 					path: 'balancesheet',
 83 | 					name: 'balancesheet',
 84 | 					component: BalanceSheetView,
 85 | 					meta: {
 86 | 						title: 'Balance Sheet'
 87 | 					}
 88 | 				},
 89 | 				{
 90 | 					path: 'incomestatement',
 91 | 					name: 'incomestatement',
 92 | 					component: IncomeStatementView,
 93 | 					meta: {
 94 | 						title: 'Income Statement'
 95 | 					}
 96 | 				}
 97 | 			]
 98 | 		}
 99 | 	]
100 | });
101 | 
102 | router.afterEach(to => {
103 | 	document.title = (to.meta.title as string) + " - Brandon's Books";
104 | });
105 | 
106 | export default router;
107 | 


--------------------------------------------------------------------------------
/src/components/JournalEntry.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import type { TransactionData } from '@/stores/transactions';
 3 | 	import { useAccountStore } from '@/stores/accounts';
 4 | 	import { useRoute, RouterLink } from 'vue-router';
 5 | 	import Figure from '@/components/Figure.vue';
 6 | 	import ActionPopup from '@/components/ActionPopup.vue';
 7 | 	import DeleteEntry from '@/components/DeleteEntry.vue';
 8 | 	import AddEntry from '@/components/AddEntry.vue';
 9 | 	import DeleteButton from '@/components/DeleteButton.vue';
10 | 	import EditButton from '@/components/EditButton.vue';
11 | 	import Actions from './Actions.vue';
12 | 
13 | 	defineProps<{
14 | 		transaction: TransactionData;
15 | 	}>();
16 | 
17 | 	const accounts = useAccountStore();
18 | 	const book = useRoute().params.book as UUID;
19 | </script>
20 | 
21 | <template>
22 | 	<template v-for="(change, index) in transaction.changes" :key="index">
23 | 		<div class="start">
24 | 			<Actions>
25 | 				<ActionPopup
26 | 					v-if="index === 0"
27 | 					:type="DeleteEntry"
28 | 					:number="transaction.number"
29 | 					titleText="Delete Transaction"
30 | 					submitText="Delete"
31 | 					destructive
32 | 				>
33 | 					<DeleteButton />
34 | 				</ActionPopup>
35 | 				<ActionPopup
36 | 					v-if="index === 0"
37 | 					:type="AddEntry"
38 | 					:number="transaction.number"
39 | 					titleText="Edit Transaction"
40 | 					submitText="Save"
41 | 				>
42 | 					<EditButton />
43 | 				</ActionPopup>
44 | 			</Actions>
45 | 		</div>
46 | 		<div :class="transaction.closing ? 'closing-date' : ''">
47 | 			<template v-if="index === 0">
48 | 				{{ transaction.date.getUTCFullYear() }}-{{
49 | 					(transaction.date.getUTCMonth() + 1).toString().padStart(2, '0')
50 | 				}}-{{ transaction.date.getUTCDate().toString().padStart(2, '0') }}
51 | 			</template>
52 | 		</div>
53 | 		<div :class="change.amount < 0 ? 'credit' : 'debit'">
54 | 			{{ accounts.byNumber(book, change.account)!.name }}
55 | 		</div>
56 | 		<div>
57 | 			<RouterLink
58 | 				:to="{
59 | 					name: 'ledgeraccount',
60 | 					params: { book, account: change.account }
61 | 				}"
62 | 			>
63 | 				{{ accounts.byNumber(book, change.account)!.userNumber }}
64 | 			</RouterLink>
65 | 		</div>
66 | 		<div class="value">
67 | 			<Figure v-if="change.amount > 0" :value="change.amount" />
68 | 		</div>
69 | 		<div class="value end">
70 | 			<Figure v-if="change.amount < 0" :value="-change.amount" />
71 | 		</div>
72 | 	</template>
73 | 	<div class="border start"></div>
74 | 	<div class="border"></div>
75 | 	<div class="summary border">
76 | 		{{ transaction.summary }}
77 | 	</div>
78 | 	<div class="border"></div>
79 | 	<div class="border"></div>
80 | 	<div class="border end"></div>
81 | </template>
82 | 
83 | <style scoped>
84 | 	.closing-date {
85 | 		font-weight: bolder;
86 | 	}
87 | 
88 | 	.summary {
89 | 		font-style: italic;
90 | 	}
91 | </style>
92 | 


--------------------------------------------------------------------------------
/src/views/IncomeStatementView.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 	import { accountTypes, incomeAccountTypes } from '@/data/accountTypes';
 3 | 	import { useRoute } from 'vue-router';
 4 | 	import TopDate from '@/components/TopDate.vue';
 5 | 	import { ref } from 'vue';
 6 | 	import TypeTotal from '@/components/TypeTotal.vue';
 7 | 	import AccountsTotal from '@/components/AccountsTotal.vue';
 8 | 	import type { TimeRange } from '@/stores/transactions';
 9 | 
10 | 	const book = useRoute().params.book as UUID;
11 | 	const range = ref<TimeRange>({});
12 | 	const startDateText = ref<string>('');
13 | 
14 | 	function updateStartDate() {
15 | 		const value = startDateText.value;
16 | 
17 | 		if (!value) {
18 | 			delete range.value.start;
19 | 			return;
20 | 		}
21 | 
22 | 		range.value.start = new Date(range.value.end ?? Date.now());
23 | 
24 | 		if (value.startsWith('last-')) {
25 | 			const days = parseInt(value.slice(5)) - 1;
26 | 			range.value.start.setDate(range.value.start.getDate() - days);
27 | 			return;
28 | 		}
29 | 
30 | 		if (value === 'month') {
31 | 			range.value.start.setDate(1);
32 | 			return;
33 | 		}
34 | 
35 | 		if (value === 'year') {
36 | 			range.value.start.setMonth(0);
37 | 			range.value.start.setDate(1);
38 | 		}
39 | 	}
40 | </script>
41 | 
42 | <template>
43 | 	<TopDate v-model="range.end" @update:model-value="updateStartDate" /> for
44 | 	<select v-model="startDateText" @change="updateStartDate">
45 | 		<option value="">all time</option>
46 | 		<option value="last-7">last 7 days</option>
47 | 		<option value="last-30">last 30 days</option>
48 | 		<option value="last-365">last 365 days</option>
49 | 		<option value="month">month to date</option>
50 | 		<option value="year">year to date</option>
51 | 	</select>
52 | 	<div class="table income-statement">
53 | 		<template v-for="(accountType, index) in incomeAccountTypes" :key="index">
54 | 			<h2>{{ accountTypes[accountType].name }}</h2>
55 | 			<AccountsTotal
56 | 				:book="book"
57 | 				:type="accountType"
58 | 				:time-range="range"
59 | 				:threeColEmpty="3"
60 | 			/>
61 | 			<TypeTotal
62 | 				valueClass="pre-total"
63 | 				:book="book"
64 | 				:type="accountType"
65 | 				:time-range="range"
66 | 				:name="`Total ${accountTypes[accountType].name}`"
67 | 				:threeColEmpty="2"
68 | 				:totalDepth="1"
69 | 			/>
70 | 		</template>
71 | 		<TypeTotal
72 | 			valueClass="total"
73 | 			:book="book"
74 | 			:type="incomeAccountTypes"
75 | 			:time-range="range"
76 | 			name="Net Income"
77 | 			:threeColEmpty="2"
78 | 		/>
79 | 	</div>
80 | </template>
81 | 
82 | <style scoped>
83 | 	@import url('@/assets/table.css');
84 | 
85 | 	.income-statement {
86 | 		grid-template-columns: 4fr 1fr 1fr;
87 | 		max-width: 39em;
88 | 	}
89 | 
90 | 	.income-statement h2 {
91 | 		grid-column: 1 / 4;
92 | 	}
93 | 
94 | 	.income-statement h2:first-child {
95 | 		margin-top: 0;
96 | 	}
97 | </style>
98 | 


--------------------------------------------------------------------------------
/src/components/ActionPopup.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | 	import type { Component } from 'vue';
  3 | 	import { ref } from 'vue';
  4 | 
  5 | 	const props = defineProps<{
  6 | 		toggleText?: string;
  7 | 		titleText: string;
  8 | 		submitText: string;
  9 | 		type: Component;
 10 | 		number?: UUID;
 11 | 		destructive?: boolean;
 12 | 	}>();
 13 | 
 14 | 	const showPopup = ref(false);
 15 | 	const error = ref('');
 16 | 	const child = ref<Component & { submit: () => void }>();
 17 | 	const buttonClass = props.destructive ? 'destructive' : 'progressive';
 18 | 
 19 | 	function togglePopup() {
 20 | 		showPopup.value = !showPopup.value;
 21 | 		error.value = '';
 22 | 	}
 23 | 
 24 | 	function showError(errorMsg: string) {
 25 | 		error.value = errorMsg;
 26 | 	}
 27 | </script>
 28 | 
 29 | <template>
 30 | 	<span @click="togglePopup" class="toggle">
 31 | 		<slot>
 32 | 			<button :class="buttonClass">{{ toggleText }}</button>
 33 | 		</slot>
 34 | 	</span>
 35 | 	<div v-if="showPopup" class="background">
 36 | 		<div role="dialog" class="popup">
 37 | 			<header>
 38 | 				<div class="title">{{ titleText }}</div>
 39 | 				<div class="close" @click="togglePopup">&times;</div>
 40 | 			</header>
 41 | 			<div class="popup-main">
 42 | 				<component
 43 | 					:is="type"
 44 | 					ref="child"
 45 | 					@error="showError"
 46 | 					@success="togglePopup"
 47 | 					:number="number"
 48 | 				/>
 49 | 				<div v-if="error" class="error">Error: {{ error }}</div>
 50 | 			</div>
 51 | 			<footer>
 52 | 				<button @click="child?.submit()" :class="buttonClass">
 53 | 					{{ submitText }}
 54 | 				</button>
 55 | 				<button @click="togglePopup">Cancel</button>
 56 | 			</footer>
 57 | 		</div>
 58 | 	</div>
 59 | </template>
 60 | 
 61 | <style scoped>
 62 | 	.toggle {
 63 | 		display: inline-flex;
 64 | 	}
 65 | 
 66 | 	.popup-main {
 67 | 		display: flex;
 68 | 		flex-direction: column;
 69 | 		gap: 0.5em;
 70 | 	}
 71 | 
 72 | 	.error {
 73 | 		margin: 0.5em 0;
 74 | 		color: rgb(150, 6, 6);
 75 | 	}
 76 | 
 77 | 	.background {
 78 | 		position: fixed;
 79 | 		display: flex;
 80 | 		align-items: center;
 81 | 		justify-content: center;
 82 | 		top: 0;
 83 | 		left: 0;
 84 | 		width: 100%;
 85 | 		height: 100%;
 86 | 		background: rgba(0, 0, 0, 0.1);
 87 | 	}
 88 | 
 89 | 	.popup {
 90 | 		display: flex;
 91 | 		background: #fff;
 92 | 		min-width: 25vw;
 93 | 		min-height: 25vh;
 94 | 		border: 1px solid var(--border-color);
 95 | 		border-radius: 4px;
 96 | 		flex-direction: column;
 97 | 		box-shadow: 2px 1px 4px 0 rgba(0, 0, 0, 0.1);
 98 | 	}
 99 | 
100 | 	header {
101 | 		display: flex;
102 | 		margin-bottom: 0.5em;
103 | 		padding: 1.25em;
104 | 		padding-bottom: 0;
105 | 	}
106 | 
107 | 	.title {
108 | 		font-weight: bold;
109 | 		flex: 1;
110 | 	}
111 | 
112 | 	.close {
113 | 		font-weight: bold;
114 | 		font-size: 1.5em;
115 | 		line-height: 0.5em;
116 | 		cursor: pointer;
117 | 	}
118 | 
119 | 	.popup-main {
120 | 		flex: 1;
121 | 		padding: 0 1.25em;
122 | 		padding-bottom: 1.25em;
123 | 	}
124 | 
125 | 	footer {
126 | 		padding: 1.25em;
127 | 		background: var(--secondary-bg);
128 | 		border-radius: 0 0 4px 4px;
129 | 		border-top: 1px solid var(--border-color);
130 | 	}
131 | 
132 | 	footer > *:not(:last-child) {
133 | 		margin-right: 1em;
134 | 	}
135 | </style>
136 | 


--------------------------------------------------------------------------------
/src/components/AddEntry.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | 	import { useAccountStore } from '@/stores/accounts';
  3 | 	import type { AccountChange, TransactionData } from '@/stores/transactions';
  4 | 	import { useTransactionStore } from '@/stores/transactions';
  5 | 	import { ref, computed } from 'vue';
  6 | 	import { useRoute } from 'vue-router';
  7 | 	import LabeledInput from '@/components/LabeledInput.vue';
  8 | 	import FigureInput from '@/components/FigureInput.vue';
  9 | 	import ActionPopup from '@/components/ActionPopup.vue';
 10 | 	import AddAccount from '@/components/AddAccount.vue';
 11 | 	import SVGButton from './SVGButton.vue';
 12 | 
 13 | 	const emit = defineEmits<{
 14 | 		(e: 'error', error: string): void;
 15 | 		(e: 'success'): void;
 16 | 	}>();
 17 | 
 18 | 	const props = defineProps<{
 19 | 		number?: UUID;
 20 | 	}>();
 21 | 
 22 | 	const accounts = useAccountStore();
 23 | 	const transactions = useTransactionStore();
 24 | 	const book = useRoute().params.book as UUID;
 25 | 
 26 | 	const transaction =
 27 | 		props.number === undefined
 28 | 			? undefined
 29 | 			: transactions.byNumber(book, props.number);
 30 | 
 31 | 	const date = ref<Date | undefined | null>(transaction?.date);
 32 | 	const summary = ref<string>(transaction?.summary ?? '');
 33 | 	const closing = ref<boolean>(transaction?.closing ?? false);
 34 | 
 35 | 	const changes = ref<AccountChange[]>(
 36 | 		transaction?.changes.map(change => ({ ...change })) || []
 37 | 	);
 38 | 
 39 | 	const unchangedAccounts = computed(() => {
 40 | 		const changedAccounts = changes.value.map(change => change.account);
 41 | 
 42 | 		return accounts
 43 | 			.byBook(book)
 44 | 			.filter(account => !changedAccounts.includes(account.number));
 45 | 	});
 46 | 
 47 | 	const selectedAccount = ref<UUID>(unchangedAccounts.value[0]?.number);
 48 | 
 49 | 	const changesWithValue = computed(() =>
 50 | 		changes.value.filter(change => change.amount)
 51 | 	);
 52 | 
 53 | 	function addChange() {
 54 | 		if (selectedAccount.value === null) return;
 55 | 
 56 | 		changes.value.push({
 57 | 			account: selectedAccount.value,
 58 | 			amount: 0
 59 | 		});
 60 | 
 61 | 		selectedAccount.value = unchangedAccounts.value[0]?.number;
 62 | 	}
 63 | 
 64 | 	function submit() {
 65 | 		let sum = 0;
 66 | 
 67 | 		if (!changesWithValue.value.length) {
 68 | 			emit('error', 'No changes');
 69 | 			return;
 70 | 		}
 71 | 
 72 | 		if (!date.value) {
 73 | 			emit('error', 'No date');
 74 | 			return;
 75 | 		}
 76 | 
 77 | 		changesWithValue.value.forEach(change => (sum += change.amount));
 78 | 
 79 | 		if (sum !== 0) {
 80 | 			emit('error', 'Unbalanced transaction');
 81 | 			return;
 82 | 		}
 83 | 
 84 | 		const data: Omit<TransactionData, "number"> & { number?: UUID; } = {
 85 | 			book,
 86 | 			number: props.number,
 87 | 			changes: changesWithValue.value,
 88 | 			date: new Date(date.value),
 89 | 			summary: summary.value
 90 | 		};
 91 | 
 92 | 		if (closing.value) {
 93 | 			data.closing = true;
 94 | 		}
 95 | 
 96 | 		transactions.addTransaction(data);
 97 | 
 98 | 		emit('success');
 99 | 	}
100 | 
101 | 	defineExpose({ submit });
102 | </script>
103 | 
104 | <template>
105 | 	<LabeledInput label="Date">
106 | 		<input
107 | 			type="date"
108 | 			:valueAsDate="date"
109 | 			@change="date = ($event.target as HTMLInputElement).valueAsDate"
110 | 		/>
111 | 	</LabeledInput>
112 | 	<LabeledInput label="Summary" v-model:value.trim="summary" />
113 | 	<fieldset>
114 | 		<legend>Changes</legend>
115 | 		<div v-if="!accounts.byBook(book).length">No accounts.</div>
116 | 		<FigureInput
117 | 			v-for="change in changes"
118 | 			:key="change.account"
119 | 			:accountType="accounts.byNumber(book, change.account)!.type"
120 | 			:label="accounts.byNumber(book, change.account)!.name"
121 | 			v-model:value="change.amount"
122 | 		/>
123 | 		<LabeledInput
124 | 			v-if="unchangedAccounts.length"
125 | 			button="Add"
126 | 			:flex="false"
127 | 			@button="addChange"
128 | 		>
129 | 			<select v-model="selectedAccount">
130 | 				<option
131 | 					v-for="account in unchangedAccounts"
132 | 					:key="account.number"
133 | 					:value="account.number"
134 | 				>
135 | 					{{ account.name }}
136 | 				</option>
137 | 			</select>
138 | 		</LabeledInput>
139 | 	</fieldset>
140 | 	<div>
141 | 		<ActionPopup
142 | 			:type="AddAccount"
143 | 			titleText="Create Account"
144 | 			submitText="Create"
145 | 		>
146 | 			<SVGButton>+ Create Account</SVGButton>
147 | 		</ActionPopup>
148 | 	</div>
149 | 	<div class="closing-entry">
150 | 		<label>
151 | 			<input
152 | 				type="checkbox"
153 | 				v-model="closing"
154 | 			/>
155 | 			<abbr title="Do not include this transaction in income statements for the same day"
156 | 				>This is a closing entry
157 | 			</abbr>
158 | 		</label>
159 | 	</div>
160 | </template>
161 | 
162 | <style>
163 | 	.closing-entry input {
164 | 		margin-right: 0.5em;
165 | 	}
166 | 
167 | 	.closing-entry label > * {
168 | 		vertical-align: middle;
169 | 	}
170 | </style>


--------------------------------------------------------------------------------
/src/stores/transactions.ts:
--------------------------------------------------------------------------------
  1 | import { defineStore } from 'pinia';
  2 | import { useAccountStore } from '@/stores/accounts';
  3 | import type { AccountType } from '@/data/accountTypes';
  4 | import { ref, watch } from 'vue';
  5 | import parseObject from '@/helpers/parseObject';
  6 | 
  7 | export interface AccountChange {
  8 | 	account: UUID;
  9 | 	amount: number;
 10 | }
 11 | 
 12 | export interface DatedChange {
 13 | 	amount: number;
 14 | 	date: Date;
 15 | 	total: number;
 16 | }
 17 | 
 18 | export interface TransactionData {
 19 | 	number: UUID;
 20 | 	book: UUID;
 21 | 	date: Date;
 22 | 	summary: string;
 23 | 	changes: AccountChange[];
 24 | 	closing?: boolean;
 25 | }
 26 | 
 27 | export interface TimeRange {
 28 | 	start?: Date;
 29 | 	end?: Date;
 30 | }
 31 | 
 32 | export const useTransactionStore = defineStore('transactions', () => {
 33 | 	const transactions = ref(parseObject<TransactionData[]>(localStorage.getItem('transactions') ?? '[]'));
 34 | 
 35 | 	transactions.value.forEach(transaction => {
 36 | 		transaction.date = new Date(transaction.date);
 37 | 	});
 38 | 
 39 | 	watch(
 40 | 		transactions,
 41 | 		() =>
 42 | 			localStorage.setItem('transactions', JSON.stringify(transactions.value)),
 43 | 		{ deep: true }
 44 | 	);
 45 | 
 46 | 	function byBook(book: UUID) {
 47 | 		return transactions.value.filter(transaction => transaction.book === book);
 48 | 	}
 49 | 
 50 | 	function byNumber(book: UUID, number: UUID) {
 51 | 		return byBook(book).find(transaction => transaction.number === number);
 52 | 	}
 53 | 
 54 | 	function* iterateChanges(
 55 | 		book: UUID,
 56 | 		timeRange?: TimeRange
 57 | 	): Generator<[TransactionData, AccountChange]> {
 58 | 		for (const transaction of byBook(book)) {
 59 | 			if (
 60 | 				(timeRange?.end && transaction.date > timeRange?.end) ||
 61 | 				(timeRange?.start && transaction.date < timeRange?.start)
 62 | 			)
 63 | 				continue;
 64 | 			if (
 65 | 				timeRange?.end &&
 66 | 				transaction.closing &&
 67 | 				timeRange.end.getTime() === transaction.date.getTime()
 68 | 			)
 69 | 				continue;
 70 | 
 71 | 			for (const change of transaction.changes) {
 72 | 				yield [transaction, change];
 73 | 			}
 74 | 		}
 75 | 	}
 76 | 
 77 | 	function getChangesForAccount(
 78 | 		book: UUID,
 79 | 		account: UUID,
 80 | 		timeRange?: TimeRange
 81 | 	) {
 82 | 		const changes: DatedChange[] = [];
 83 | 
 84 | 		let total = 0;
 85 | 
 86 | 		for (const [transaction, change] of iterateChanges(book, timeRange)) {
 87 | 			if (change.account !== account) continue;
 88 | 
 89 | 			total += change.amount;
 90 | 
 91 | 			changes.push({
 92 | 				amount: change.amount,
 93 | 				date: transaction.date,
 94 | 				total: total
 95 | 			});
 96 | 		}
 97 | 
 98 | 		return changes;
 99 | 	}
100 | 
101 | 	function getTotalForAccount(
102 | 		book: UUID,
103 | 		account: UUID,
104 | 		timeRange?: TimeRange
105 | 	) {
106 | 		let total = 0;
107 | 
108 | 		for (const [_, change] of iterateChanges(book, timeRange)) {
109 | 			if (change.account !== account) continue;
110 | 
111 | 			total += change.amount;
112 | 		}
113 | 
114 | 		return total;
115 | 	}
116 | 
117 | 	function getTotalForAccountType(
118 | 		book: UUID,
119 | 		types: AccountType | AccountType[],
120 | 		timeRange?: TimeRange
121 | 	) {
122 | 		let total = 0;
123 | 		const accountStore = useAccountStore();
124 | 
125 | 		if (typeof types === 'number') types = [types];
126 | 
127 | 		for (const [_, change] of iterateChanges(book, timeRange)) {
128 | 			const type = accountStore.byNumber(book, change.account)!.type;
129 | 
130 | 			if (!types.includes(type)) continue;
131 | 
132 | 			total += change.amount;
133 | 		}
134 | 
135 | 		return total;
136 | 	}
137 | 
138 | 	function addTransaction(
139 | 		data: Omit<TransactionData, 'number'> & { number?: UUID }
140 | 	) {
141 | 		if (data.number) removeTransaction(data.book, data.number);
142 | 
143 | 		const transactionsInBook = byBook(data.book);
144 | 		const number = data.number ?? crypto.randomUUID();
145 | 
146 | 		let index = transactionsInBook.findIndex(
147 | 			transactions => transactions.date > data.date
148 | 		);
149 | 
150 | 		index = index == -1 ? transactionsInBook.length : index;
151 | 
152 | 		data.changes.sort((a, b) => Math.sign(b.amount) - Math.sign(a.amount));
153 | 
154 | 		transactions.value.splice(index, 0, { ...data, number });
155 | 	}
156 | 
157 | 	function removeTransaction(book: UUID, number: UUID) {
158 | 		transactions.value = transactions.value.filter(
159 | 			transaction => transaction.book !== book || transaction.number !== number
160 | 		);
161 | 	}
162 | 
163 | 	function removeByBook(book: UUID) {
164 | 		transactions.value = transactions.value.filter(
165 | 			transaction => transaction.book !== book
166 | 		);
167 | 	}
168 | 
169 | 	return {
170 | 		transactions,
171 | 		byBook,
172 | 		byNumber,
173 | 		getChangesForAccount,
174 | 		getTotalForAccount,
175 | 		getTotalForAccountType,
176 | 		addTransaction,
177 | 		removeTransaction,
178 | 		removeByBook
179 | 	};
180 | });
181 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                     GNU GENERAL PUBLIC LICENSE
  2 |                        Version 2, June 1991
  3 | 
  4 |  Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
  5 |  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
  6 |  Everyone is permitted to copy and distribute verbatim copies
  7 |  of this license document, but changing it is not allowed.
  8 | 
  9 |                             Preamble
 10 | 
 11 |   The licenses for most software are designed to take away your
 12 | freedom to share and change it.  By contrast, the GNU General Public
 13 | License is intended to guarantee your freedom to share and change free
 14 | software--to make sure the software is free for all its users.  This
 15 | General Public License applies to most of the Free Software
 16 | Foundation's software and to any other program whose authors commit to
 17 | using it.  (Some other Free Software Foundation software is covered by
 18 | the GNU Lesser General Public License instead.)  You can apply it to
 19 | your programs, too.
 20 | 
 21 |   When we speak of free software, we are referring to freedom, not
 22 | price.  Our General Public Licenses are designed to make sure that you
 23 | have the freedom to distribute copies of free software (and charge for
 24 | this service if you wish), that you receive source code or can get it
 25 | if you want it, that you can change the software or use pieces of it
 26 | in new free programs; and that you know you can do these things.
 27 | 
 28 |   To protect your rights, we need to make restrictions that forbid
 29 | anyone to deny you these rights or to ask you to surrender the rights.
 30 | These restrictions translate to certain responsibilities for you if you
 31 | distribute copies of the software, or if you modify it.
 32 | 
 33 |   For example, if you distribute copies of such a program, whether
 34 | gratis or for a fee, you must give the recipients all the rights that
 35 | you have.  You must make sure that they, too, receive or can get the
 36 | source code.  And you must show them these terms so they know their
 37 | rights.
 38 | 
 39 |   We protect your rights with two steps: (1) copyright the software, and
 40 | (2) offer you this license which gives you legal permission to copy,
 41 | distribute and/or modify the software.
 42 | 
 43 |   Also, for each author's protection and ours, we want to make certain
 44 | that everyone understands that there is no warranty for this free
 45 | software.  If the software is modified by someone else and passed on, we
 46 | want its recipients to know that what they have is not the original, so
 47 | that any problems introduced by others will not reflect on the original
 48 | authors' reputations.
 49 | 
 50 |   Finally, any free program is threatened constantly by software
 51 | patents.  We wish to avoid the danger that redistributors of a free
 52 | program will individually obtain patent licenses, in effect making the
 53 | program proprietary.  To prevent this, we have made it clear that any
 54 | patent must be licensed for everyone's free use or not licensed at all.
 55 | 
 56 |   The precise terms and conditions for copying, distribution and
 57 | modification follow.
 58 | 
 59 |                     GNU GENERAL PUBLIC LICENSE
 60 |    TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
 61 | 
 62 |   0. This License applies to any program or other work which contains
 63 | a notice placed by the copyright holder saying it may be distributed
 64 | under the terms of this General Public License.  The "Program", below,
 65 | refers to any such program or work, and a "work based on the Program"
 66 | means either the Program or any derivative work under copyright law:
 67 | that is to say, a work containing the Program or a portion of it,
 68 | either verbatim or with modifications and/or translated into another
 69 | language.  (Hereinafter, translation is included without limitation in
 70 | the term "modification".)  Each licensee is addressed as "you".
 71 | 
 72 | Activities other than copying, distribution and modification are not
 73 | covered by this License; they are outside its scope.  The act of
 74 | running the Program is not restricted, and the output from the Program
 75 | is covered only if its contents constitute a work based on the
 76 | Program (independent of having been made by running the Program).
 77 | Whether that is true depends on what the Program does.
 78 | 
 79 |   1. You may copy and distribute verbatim copies of the Program's
 80 | source code as you receive it, in any medium, provided that you
 81 | conspicuously and appropriately publish on each copy an appropriate
 82 | copyright notice and disclaimer of warranty; keep intact all the
 83 | notices that refer to this License and to the absence of any warranty;
 84 | and give any other recipients of the Program a copy of this License
 85 | along with the Program.
 86 | 
 87 | You may charge a fee for the physical act of transferring a copy, and
 88 | you may at your option offer warranty protection in exchange for a fee.
 89 | 
 90 |   2. You may modify your copy or copies of the Program or any portion
 91 | of it, thus forming a work based on the Program, and copy and
 92 | distribute such modifications or work under the terms of Section 1
 93 | above, provided that you also meet all of these conditions:
 94 | 
 95 |     a) You must cause the modified files to carry prominent notices
 96 |     stating that you changed the files and the date of any change.
 97 | 
 98 |     b) You must cause any work that you distribute or publish, that in
 99 |     whole or in part contains or is derived from the Program or any
100 |     part thereof, to be licensed as a whole at no charge to all third
101 |     parties under the terms of this License.
102 | 
103 |     c) If the modified program normally reads commands interactively
104 |     when run, you must cause it, when started running for such
105 |     interactive use in the most ordinary way, to print or display an
106 |     announcement including an appropriate copyright notice and a
107 |     notice that there is no warranty (or else, saying that you provide
108 |     a warranty) and that users may redistribute the program under
109 |     these conditions, and telling the user how to view a copy of this
110 |     License.  (Exception: if the Program itself is interactive but
111 |     does not normally print such an announcement, your work based on
112 |     the Program is not required to print an announcement.)
113 | 
114 | These requirements apply to the modified work as a whole.  If
115 | identifiable sections of that work are not derived from the Program,
116 | and can be reasonably considered independent and separate works in
117 | themselves, then this License, and its terms, do not apply to those
118 | sections when you distribute them as separate works.  But when you
119 | distribute the same sections as part of a whole which is a work based
120 | on the Program, the distribution of the whole must be on the terms of
121 | this License, whose permissions for other licensees extend to the
122 | entire whole, and thus to each and every part regardless of who wrote it.
123 | 
124 | Thus, it is not the intent of this section to claim rights or contest
125 | your rights to work written entirely by you; rather, the intent is to
126 | exercise the right to control the distribution of derivative or
127 | collective works based on the Program.
128 | 
129 | In addition, mere aggregation of another work not based on the Program
130 | with the Program (or with a work based on the Program) on a volume of
131 | a storage or distribution medium does not bring the other work under
132 | the scope of this License.
133 | 
134 |   3. You may copy and distribute the Program (or a work based on it,
135 | under Section 2) in object code or executable form under the terms of
136 | Sections 1 and 2 above provided that you also do one of the following:
137 | 
138 |     a) Accompany it with the complete corresponding machine-readable
139 |     source code, which must be distributed under the terms of Sections
140 |     1 and 2 above on a medium customarily used for software interchange; or,
141 | 
142 |     b) Accompany it with a written offer, valid for at least three
143 |     years, to give any third party, for a charge no more than your
144 |     cost of physically performing source distribution, a complete
145 |     machine-readable copy of the corresponding source code, to be
146 |     distributed under the terms of Sections 1 and 2 above on a medium
147 |     customarily used for software interchange; or,
148 | 
149 |     c) Accompany it with the information you received as to the offer
150 |     to distribute corresponding source code.  (This alternative is
151 |     allowed only for noncommercial distribution and only if you
152 |     received the program in object code or executable form with such
153 |     an offer, in accord with Subsection b above.)
154 | 
155 | The source code for a work means the preferred form of the work for
156 | making modifications to it.  For an executable work, complete source
157 | code means all the source code for all modules it contains, plus any
158 | associated interface definition files, plus the scripts used to
159 | control compilation and installation of the executable.  However, as a
160 | special exception, the source code distributed need not include
161 | anything that is normally distributed (in either source or binary
162 | form) with the major components (compiler, kernel, and so on) of the
163 | operating system on which the executable runs, unless that component
164 | itself accompanies the executable.
165 | 
166 | If distribution of executable or object code is made by offering
167 | access to copy from a designated place, then offering equivalent
168 | access to copy the source code from the same place counts as
169 | distribution of the source code, even though third parties are not
170 | compelled to copy the source along with the object code.
171 | 
172 |   4. You may not copy, modify, sublicense, or distribute the Program
173 | except as expressly provided under this License.  Any attempt
174 | otherwise to copy, modify, sublicense or distribute the Program is
175 | void, and will automatically terminate your rights under this License.
176 | However, parties who have received copies, or rights, from you under
177 | this License will not have their licenses terminated so long as such
178 | parties remain in full compliance.
179 | 
180 |   5. You are not required to accept this License, since you have not
181 | signed it.  However, nothing else grants you permission to modify or
182 | distribute the Program or its derivative works.  These actions are
183 | prohibited by law if you do not accept this License.  Therefore, by
184 | modifying or distributing the Program (or any work based on the
185 | Program), you indicate your acceptance of this License to do so, and
186 | all its terms and conditions for copying, distributing or modifying
187 | the Program or works based on it.
188 | 
189 |   6. Each time you redistribute the Program (or any work based on the
190 | Program), the recipient automatically receives a license from the
191 | original licensor to copy, distribute or modify the Program subject to
192 | these terms and conditions.  You may not impose any further
193 | restrictions on the recipients' exercise of the rights granted herein.
194 | You are not responsible for enforcing compliance by third parties to
195 | this License.
196 | 
197 |   7. If, as a consequence of a court judgment or allegation of patent
198 | infringement or for any other reason (not limited to patent issues),
199 | conditions are imposed on you (whether by court order, agreement or
200 | otherwise) that contradict the conditions of this License, they do not
201 | excuse you from the conditions of this License.  If you cannot
202 | distribute so as to satisfy simultaneously your obligations under this
203 | License and any other pertinent obligations, then as a consequence you
204 | may not distribute the Program at all.  For example, if a patent
205 | license would not permit royalty-free redistribution of the Program by
206 | all those who receive copies directly or indirectly through you, then
207 | the only way you could satisfy both it and this License would be to
208 | refrain entirely from distribution of the Program.
209 | 
210 | If any portion of this section is held invalid or unenforceable under
211 | any particular circumstance, the balance of the section is intended to
212 | apply and the section as a whole is intended to apply in other
213 | circumstances.
214 | 
215 | It is not the purpose of this section to induce you to infringe any
216 | patents or other property right claims or to contest validity of any
217 | such claims; this section has the sole purpose of protecting the
218 | integrity of the free software distribution system, which is
219 | implemented by public license practices.  Many people have made
220 | generous contributions to the wide range of software distributed
221 | through that system in reliance on consistent application of that
222 | system; it is up to the author/donor to decide if he or she is willing
223 | to distribute software through any other system and a licensee cannot
224 | impose that choice.
225 | 
226 | This section is intended to make thoroughly clear what is believed to
227 | be a consequence of the rest of this License.
228 | 
229 |   8. If the distribution and/or use of the Program is restricted in
230 | certain countries either by patents or by copyrighted interfaces, the
231 | original copyright holder who places the Program under this License
232 | may add an explicit geographical distribution limitation excluding
233 | those countries, so that distribution is permitted only in or among
234 | countries not thus excluded.  In such case, this License incorporates
235 | the limitation as if written in the body of this License.
236 | 
237 |   9. The Free Software Foundation may publish revised and/or new versions
238 | of the General Public License from time to time.  Such new versions will
239 | be similar in spirit to the present version, but may differ in detail to
240 | address new problems or concerns.
241 | 
242 | Each version is given a distinguishing version number.  If the Program
243 | specifies a version number of this License which applies to it and "any
244 | later version", you have the option of following the terms and conditions
245 | either of that version or of any later version published by the Free
246 | Software Foundation.  If the Program does not specify a version number of
247 | this License, you may choose any version ever published by the Free Software
248 | Foundation.
249 | 
250 |   10. If you wish to incorporate parts of the Program into other free
251 | programs whose distribution conditions are different, write to the author
252 | to ask for permission.  For software which is copyrighted by the Free
253 | Software Foundation, write to the Free Software Foundation; we sometimes
254 | make exceptions for this.  Our decision will be guided by the two goals
255 | of preserving the free status of all derivatives of our free software and
256 | of promoting the sharing and reuse of software generally.
257 | 
258 |                             NO WARRANTY
259 | 
260 |   11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
268 | REPAIR OR CORRECTION.
269 | 
270 |   12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
278 | POSSIBILITY OF SUCH DAMAGES.
279 | 
280 |                      END OF TERMS AND CONDITIONS
281 | 
282 |             How to Apply These Terms to Your New Programs
283 | 
284 |   If you develop a new program, and you want it to be of the greatest
285 | possible use to the public, the best way to achieve this is to make it
286 | free software which everyone can redistribute and change under these terms.
287 | 
288 |   To do so, attach the following notices to the program.  It is safest
289 | to attach them to the start of each source file to most effectively
290 | convey the exclusion of warranty; and each file should have at least
291 | the "copyright" line and a pointer to where the full notice is found.
292 | 
293 |     <one line to give the program's name and a brief idea of what it does.>
294 |     Copyright (C) <year>  <name of author>
295 | 
296 |     This program is free software; you can redistribute it and/or modify
297 |     it under the terms of the GNU General Public License as published by
298 |     the Free Software Foundation; either version 2 of the License, or
299 |     (at your option) any later version.
300 | 
301 |     This program is distributed in the hope that it will be useful,
302 |     but WITHOUT ANY WARRANTY; without even the implied warranty of
303 |     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
304 |     GNU General Public License for more details.
305 | 
306 |     You should have received a copy of the GNU General Public License along
307 |     with this program; if not, write to the Free Software Foundation, Inc.,
308 |     51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
309 | 
310 | Also add information on how to contact you by electronic and paper mail.
311 | 
312 | If the program is interactive, make it output a short notice like this
313 | when it starts in an interactive mode:
314 | 
315 |     Gnomovision version 69, Copyright (C) year name of author
316 |     Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
317 |     This is free software, and you are welcome to redistribute it
318 |     under certain conditions; type `show c' for details.
319 | 
320 | The hypothetical commands `show w' and `show c' should show the appropriate
321 | parts of the General Public License.  Of course, the commands you use may
322 | be called something other than `show w' and `show c'; they could even be
323 | mouse-clicks or menu items--whatever suits your program.
324 | 
325 | You should also get your employer (if you work as a programmer) or your
326 | school, if any, to sign a "copyright disclaimer" for the program, if
327 | necessary.  Here is a sample; alter the names:
328 | 
329 |   Yoyodyne, Inc., hereby disclaims all copyright interest in the program
330 |   `Gnomovision' (which makes passes at compilers) written by James Hacker.
331 | 
332 |   <signature of Ty Coon>, 1 April 1989
333 |   Ty Coon, President of Vice
334 | 
335 | This General Public License does not permit incorporating your program into
336 | proprietary programs.  If your program is a subroutine library, you may
337 | consider it more useful to permit linking proprietary applications with the
338 | library.  If this is what you want to do, use the GNU Lesser General
339 | Public License instead of this License.
340 | 


--------------------------------------------------------------------------------